<template>
  <div class="revset page-miH page-bgBack">
    <a-layout>
      <PageHeader @back="goback" subTitle="返回">{{ year }}年{{ month }}月参保管理</PageHeader>
      <div class="flex-center-between pb12" style="margin-top: 20px">
        <div
          class="wb24 border_hover h75 color_fa border_dashed top_warp"
          v-for="(item, index) in topData"
          :key="index"
          style="padding-left: 24px"
          :class="active === index ? 'border_active' : ''"
          @click="onTopTabs(index)"
        >
          <img :src="item.url" style="width: 32px; height: 32px" :alt="item.title" />
          <div>
            <div class="top_title">{{ item.title }}</div>
            <CountTo :startVal="0" :endVal="item.num" :duration="2000" class="top_number" />
            <div></div>
          </div>
        </div>
      </div>

      <div class="typeList">
        <div class="mothleft">
          <a-icon type="left" style="cursor: pointer" @click="leftClick" />
          <div class="staff-moth">{{ year }}年{{ month }}月</div>
          <a-icon type="right" style="cursor: pointer" @click="rightClick" />
        </div>
        <div class="divshu">
          <div class="divshu2"></div>
        </div>
        <div class="staff-top2-right">
          <div class="staff-top2">
            <div class="staff-top-h">
              <div class="staff-top-item-name">个人社保</div>
              <div class="staff-top-item-num">{{ personalSocAmount }}</div>
            </div>
          </div>
          <div class="staff-top2">
            <div class="staff-top-h">
              <div class="staff-top-item-name">单位社保</div>
              <div class="staff-top-item-num">{{ companySocAmount }}</div>
            </div>
          </div>
          <div class="staff-top2">
            <div class="staff-top-h">
              <div class="staff-top-item-name">个人公积金</div>
              <div class="staff-top-item-num">{{ personalPfAmount }}</div>
            </div>
          </div>

          <div class="staff-top2">
            <div class="staff-top-h">
              <div class="staff-top-item-name">单位公积金</div>
              <div class="staff-top-item-num">{{ companyPfAmount }}</div>
            </div>
          </div>
          <div class="staff-top2">
            <div class="staff-top-h">
              <div class="staff-top-item-name">服务费</div>
              <div class="staff-top-item-num">{{ serviceCostAmount }}</div>
            </div>
          </div>
          <div class="staff-top2" v-if="accumulationFundFine + socialSecurityFine != 0">
            <a-popover placement="top">
              <template slot="content">
                <div style="display: flex; flex-flow: row">
                  <div>
                    <div style="color: #9c9c9c">社保滞纳金</div>
                    <div style="color: #55565d; font-size: 24px">{{ socialSecurityFine }}</div>
                  </div>
                  <div style="margin-left: 20px">
                    <div style="color: #9c9c9c">公积金滞纳金</div>
                    <div style="color: #55565d; font-size: 24px">{{ accumulationFundFine }}</div>
                  </div>
                </div>
              </template>

              <div class="staff-top-h">
                <div class="staff-top-item-name">滞纳金</div>
                <div class="staff-top-item-num">{{ accumulationFundFine + socialSecurityFine }}</div>
              </div>
            </a-popover>
          </div>
          <div class="staff-top2" v-if="personalDifferenceAmount">
            <div class="staff-top-h">
              <div class="staff-top-item-name">个人差额费用</div>
              <div class="staff-top-item-num">{{ personalDifferenceAmount }}</div>
            </div>
          </div>
          <div class="staff-top2" v-if="companyDifferenceAmount">
            <div class="staff-top-h">
              <div class="staff-top-item-name">单位差额费用</div>
              <div class="staff-top-item-num">{{ companyDifferenceAmount }}</div>
            </div>
          </div>
          <div class="staff-top2">
            <div class="staff-top-h">
              <div class="staff-top-item-name">合计</div>
              <div class="staff-top-item-num">{{ totalAmount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="inApproval"
        style="
          margin-top: 15px;
          padding-left: 10px;
          display: flex;
          flex-flow: row;
          align-items: center;
          height: 35px;
          width: 100%;
          background-color: #fffbe6;
          border-style: solid;
          border-color: #ffe58f;
          border-width: 1px;
          border-radius: 5px;
        "
      >
        <img style="width: 16px; height: 16px; margin-right: 5px" src="../../../assets/icons/重复.png" />
        <span sytle="color:#55565D;font-size:14px;">账单已生成，无法操作</span>
      </div>

      <!-- 表单筛选 -->
      <div class="mt24">
        <TableTitle style="padding: 0; height: 32px; line-height: 32px; margin: 4px 0 16px">
          <template slot="title"></template>
          <template slot="action">
            <a-button
              :disabled="!monthWhetherCurrent || inApproval"
              :style="
                monthWhetherCurrent ? [{ marginLeft: '13px' }, { color: 'red' }, { border: '1px solid red' }] : [{ marginLeft: '13px' }]
              "
              @click="isChooseStaff4 = true"
              >差额费用</a-button
            >
            <a-button
              style="margin-left: 13px"
              :disabled="!monthWhetherCurrent || inApproval"
              @click="
                $router.push({
                  name: 'batchMyClienteleImports',
                  query: { monthId: monthCurrent }
                })
              "
              >批量修改</a-button
            >
            <a-button style="margin-left: 13px" @click="addBatchRecordList">生成回款记录</a-button>
            <a-button
              v-if="false"
              style="margin-left: 13px"
              type="primary"
              @click="piLiangDaoRu"
              :disabled="!monthWhetherCurrent || inApproval"
              >批量导入</a-button
            >
            <a-button :disabled="!monthWhetherCurrent || inApproval" style="margin-left: 13px" @click="backFeiyong">退费</a-button>
            <a-button type="primary" :disabled="!monthWhetherCurrent || inApproval" class="ml12" @click="chooseOnWork2">
              补收/补缴
            </a-button>
          </template>
        </TableTitle>
        <TableBody
          v-if="this.monthCurrent"
          ref="tbody"
          selectHead
          selection
          tableName="shebao4"
          tableHeadUrl="/hr/api/v1/empSocInfos/getDynamicHead"
          :needUpdateHead="true"
          :tableHeadParams="tableHeadParams"
          :selectedHead.sync="selectedHead"
          :selectedRowKeys.sync="selectedRowKeys"
          :source="dataDetail"
          headerRowID="sortable_list"
          :columns="columns"
          subjectType="site"
          class="mt12 soc-tb"
          @onClose="() => {}"
          @onSearch="handleSearch()"
          @onReload="checkPeopleAmount()"
        >
          <template slot="search">
            <a-input-search
              v-model="searchName"
              :defaultValue="searchName"
              placeholder="搜索员工"
              style="width: 200px"
              @search="handleSearch"
            />
            <a-select
              label="社保状态"
              style="width: 100%"
              placeholder="请选择社保状态"
              allow-clear
              v-model="empSocStatus"
              :defaultValue="empSocStatus"
            >
              <a-select-option v-for="item in socTypeSource" :key="item.label" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-select
              label="医保状态"
              style="width: 100%"
              placeholder="请选择医保状态"
              allow-clear
              v-model="empMeStatus"
              :defaultValue="empMeStatus"
            >
              <a-select-option v-for="item in socTypeSource" :key="item.label" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-select
              label="公积金状态"
              style="width: 100%"
              placeholder="请选择公积金状态"
              allow-clear
              v-model="empPfStatus"
              :defaultValue="empPfStatus"
            >
              <a-select-option v-for="item in socTypeSource" :key="item.label" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-select
              label="缴费类型"
              style="width: 100%"
              placeholder="请选择缴费类型"
              allow-clear
              v-model="socPayCostType"
              :defaultValue="socPayCostType"
            >
              <a-select-option v-for="item in socPayCostTypeMap" :key="item.id">
                {{ item.value }}
              </a-select-option>
            </a-select>
            <a-select
              label="参保方案"
              style="width: 100%"
              placeholder="请选择参保方案"
              allow-clear
              v-model="progIdser"
              :defaultValue="progIdser"
            >
              <a-select-option v-for="item in progNameList" :key="item.socProgItemVOList[0].progId">
                {{ item.progName }}
              </a-select-option>
            </a-select>
            <city
              label="城市"
              style="width: 100%"
              placeholder="请选择城市"
              :level="2"
              :default-value="socCity"
              :allow-clear="true"
              @change="handleCity($event)"
            />
            <a-select v-model="rStatus" label="在职状态" style="width: 100%" placeholder="选择在职状态" allow-clear :defaultValue="rStatus">
              <a-select-option v-for="item in liststatus" :key="item.id">{{ item.value }}</a-select-option>
            </a-select>
            <a-select
              label="标签"
              style="width: 100%"
              mode="multiple"
              placeholder="请选择标签"
              allow-clear
              v-model="tags"
              :defaultValue="tags"
            >
              <a-select-option v-for="item in labelList" :key="item.tagName">{{ item.tagName }}</a-select-option>
            </a-select>
            <a-select
              label="渠道"
              style="width: 100%"
              v-model="channelId"
              placeholder="请选择渠道"
              :allow-clear="true"
              :defaultValue="channelId"
            >
              <a-select-option v-for="(item, index) in channelNames" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            <a-select
              label="户口类型"
              style="width: 100%"
              v-model="regType"
              allowClear
              placeholder="请选择户口类型"
              :defaultValue="regType"
            >
              <a-select-option value="1">城镇户口</a-select-option>
              <a-select-option value="2">农村户口</a-select-option>
              <a-select-option value="3">居民户口</a-select-option>
            </a-select>
            <SelectWithInputAdd
              v-model="socAccount"
              editable
              allowClear
              mode="select"
              dictCode="1220"
              label="社保账号"
              placeholder="社保账号"
              style="width: 100%"
            />
            <SelectWithInputAdd
              v-model="meAccount"
              editable
              allowClear
              mode="select"
              dictCode="1221"
              label="医保账号"
              placeholder="医保账号"
              style="width: 100%"
            />
            <SelectWithInputAdd
              v-model="pfAccount"
              editable
              allowClear
              mode="select"
              dictCode="1222"
              label="公积金账号"
              placeholder="公积金账号"
              style="width: 100%"
            />
            <SelectWithInputAdd
              v-model="contractSubject"
              editable
              allowClear
              mode="select"
              dictCode="1223"
              label="签约主体"
              placeholder="签约主体"
              style="width: 100%"
            />
          </template>
          <template slot="export">
            <a-divider type="vertical" />
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item @click="exportExel()" :disabled="dataDetail.length === 0">全部导出</a-menu-item>
                <a-menu-item
                  @click="
                    () => {
                      this.selectionBtnLock = true;
                    }
                  "
                  >批量导出</a-menu-item
                >
              </a-menu>
              <a-button class="action-btn" type="link">
                导出
                <a-icon type="caret-down" />
              </a-button>
            </a-dropdown>
          </template>
          <template slot-scope="prop">
            <a-table
              v-if="showTable"
              :class="prop.className"
              :components="prop.components"
              :columns="prop.columns"
              :scroll="{ x: prop.scrollWidth }"
              :customHeaderRow="
                () => {
                  return {
                    domProps: {
                      id: prop.headerRowID
                    }
                  };
                }
              "
              :data-source="dataDetail"
              row-key="id"
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }"
              :pagination="pagination"
              @change="handlePageChange"
            >
              <template slot="name" slot-scope="text, record">
                <div style="position: relative">
                  <img
                    v-if="record.whetherLeave"
                    style="position: absolute; top: -16px; left: 5px; width: 45px"
                    src="../../../assets/shebao/离职.png"
                    alt
                  />
                </div>
                {{ text }}
              </template>
              <template slot="regType" slot-scope="text">
                <span>{{ ["城镇户口", "农村户口", "居民户口"][text - 1] }}</span>
              </template>
              <template slot="empSocStatus" slot-scope="text">
                <span>{{ getPostTypeNew(text) }}</span>
              </template>
              <template slot="empMeStatus" slot-scope="text">
                <span>{{ getPostTypeNew(text) }}</span>
              </template>
              <template slot="empPfStatus" slot-scope="text">
                <span>{{ getPostTypeNew(text) }}</span>
              </template>
              <template slot="refundsType" slot-scope="text">
                <span>
                  {{ text === 1 ? "社保退费" : text === 2 ? "公积金退费" : text === null ? "--" : "医保退费" }}
                </span>
              </template>
              <template slot="refundsBeginTime" slot-scope="text">
                <span>{{ getTuiTime(text) }}</span>
              </template>
              <template slot="refundsEndTime" slot-scope="text">
                <span>{{ getTuiTime(text) }}</span>
              </template>
              <template slot="month" slot-scope="text, record">
                <span>{{ record.year }}-{{ record.month }}</span>
              </template>
              <template slot="serviceCost" slot-scope="text, record">
                <span>{{ record.serviceCost ? record.serviceCost : 0 }}</span>
              </template>
              <template slot="socialSecurityFine" slot-scope="text, record">
                <span>{{ getZhiNaJinCout(record) }}</span>
              </template>
              <template slot="action" slot-scope="text, record">
                <div @click="openDetail(record)" class="detail_item">详情</div>
              </template>
              <template slot="payCostType" slot-scope="record">
                <a-tooltip>
                  <template slot="title">{{ getPayCostType(record) }}</template>
                  {{ getPayCostType(record) }}
                </a-tooltip>
              </template>
            </a-table>
          </template>
        </TableBody>
      </div>
      <a-row style="height: 25px"></a-row>
      <a-modal :visible="differenceVisible" title="差额费用" @ok="differenceOk" @cancel="differenceVisible = false">
        <div style="padding: 0 45px">
          <div style="display: flex; align-items: center">
            <div><span style="color: red">*</span>差额费用名称</div>
            <a-input :maxLength="20" v-model="nameDifference" placeholder="请输入" style="width: 220px; margin-left: 20px"></a-input>
          </div>
          <div style="display: flex; align-items: center; margin-top: 24px">
            <div>个人差额费用</div>
            <a-input-number
              :precision="2"
              v-model="personalDifference"
              placeholder="请输入"
              style="width: 220px; margin-left: 24px"
            ></a-input-number>
          </div>
          <div style="display: flex; align-items: center; margin-top: 24px">
            <div>单位差额费用</div>
            <a-input-number
              :precision="2"
              v-model="companyDifference"
              placeholder="请输入"
              style="width: 220px; margin-left: 24px"
            ></a-input-number>
          </div>
          <div style="color: #a6a8b4; font-size: 10px; margin-top: 12px">当二次操作已存在的差额费用时，填0则覆盖为0，填空则默认不更新</div>
        </div>
      </a-modal>
      <a-modal title="详情" width="1000px" :visible="xiangqing" @cancel="closeXiangq" cancelText>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="closeXiangq">确定</a-button>
        </template>
        <div style="padding-left: 30px; padding-right: 30px">
          <div class="userInfo-box">
            <div style="display: flex; flex-flow: row; align-items: center">
              <a-avatar
                v-if="currentDetail && currentDetail.empPhoto !== null"
                :key="currentDetail && currentDetail.empPhoto"
                :src="currentDetail && currentDetail.empPhoto"
                :size="56"
              />
              <a-avatar v-else icon="user" :size="56" />
              <div style="display: flex; flex-flow: column; margin-left: 15px">
                <div style="display: flex; flex-flow: row; align-items: center">
                  <div class="name fs18" style="color: #3c3d43">{{ currentDetail ? currentDetail.name : "" }}</div>
                  <div class="depName fs12 ml16" style="color: #767885">
                    {{
                      currentDetail
                        ? `社保${getPostTypeNew(currentDetail.empSocStatus)} / 医保${getPostTypeNew(
                            currentDetail.empMeStatus
                          )} / 公积金${getPostTypeNew(currentDetail.empPfStatus)}`
                        : ""
                    }}
                  </div>
                </div>
                <div class="ta-left">{{ currentDetail ? currentDetail.idCard : "" }}</div>
              </div>
            </div>
            <div class="editInfo-box">
              <a-button class="renyuanxinxi" @click="personInfo">个人档案</a-button>
              <a-button class="renyuanxinxi" @click="enterRecord">参保记录</a-button>
              <a-button
                :disabled="currentDetail && (currentDetail.payCostType === 2 || !monthWhetherCurrent || inApproval)"
                class="liangge"
                @click="() => editShebaoInfo(currentDetail)"
                >编辑</a-button
              >
              <a-button
                v-if="currentDetail && currentDetail.payCostType !== 7"
                :disabled="
                  currentDetail &&
                  (currentDetail.payCostType === 2 || currentDetail.payCostType === 3 || !monthWhetherCurrent || inApproval)
                "
                class="liangge"
                @click="stopShebao(currentDetail)"
                >减员</a-button
              >
              <a-popconfirm
                v-if="currentDetail && currentDetail.payCostType === 3"
                :title="`确认要删除吗？`"
                okText="确认"
                cancelText="取消"
                @confirm="deletShebao(currentDetail)"
              >
                <a-button class="liangge">删除</a-button>
              </a-popconfirm>
            </div>
          </div>
          <div class="userInfo-shebaoInfo">
            <div class="shebaoInfo">
              <div class="personshebaoInfo">
                <span class="text">个人社保号:</span>
                <span class="number">{{ currentDetail ? currentDetail.socCard : "" }}</span>
              </div>
              <div class="sfInfo">
                <span class="text">个人公积金号:</span>
                <span class="number">{{ currentDetail ? currentDetail.pfCard : "" }}</span>
              </div>
              <div class="cityInfo">
                <span class="text">参保城市:</span>
                <span class="number">{{ currentDetail ? currentDetail.socCityName : "" }}</span>
              </div>
              <div class="methodInfo">
                <span class="text">缴纳方案:</span>
                <span class="number">{{ currentDetail ? currentDetail.progName : "" }}</span>
              </div>
            </div>
          </div>
          <div class="payInfo-box">
            <a-table :data-source="currentDetail ? currentDetail.progItemListVo : null" :pagination="false" row-key="id">
              <a-table-column title="缴纳项目" align="center">
                <template slot-scope="text1">
                  <div
                    :style="{
                      fontWeight: text1.itemName === '缴费合计' ? 700 : 400
                    }"
                  >
                    {{ text1.itemName }}
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="缴纳基数" align="center">
                <template slot-scope="text1">
                  <span>{{ judgeDefault(text1) }}</span>
                </template>
              </a-table-column>
              <a-table-column title="个人比例" align="center">
                <template slot-scope="text1">
                  <span>
                    {{ text1.persentPersonal === null ? "--" : currentDetail.onlySocAmount ? "/" : text1.persentPersonal + "%" }}
                  </span>
                </template>
              </a-table-column>
              <a-table-column title="单位比例" align="center">
                <template slot-scope="text1">
                  <span>
                    {{ text1.persentCompany === null ? "--" : currentDetail.onlySocAmount ? "/" : text1.persentCompany + "%" }}
                  </span>
                </template>
              </a-table-column>
              <a-table-column title="个人缴费" align="center">
                <template slot-scope="text1">
                  <div :style="[{ fontWeight: text1.itemName === '缴费合计' ? 700 : 400 }]">{{ text1.amountPersonal }}</div>
                </template>
              </a-table-column>
              <a-table-column title="单位缴费" align="center">
                <template slot-scope="text1">
                  <div :style="[{ fontWeight: text1.itemName === '缴费合计' ? 700 : 400 }]">{{ text1.amountCompany }}</div>
                </template>
              </a-table-column>
              <a-table-column title="缴费合计" align="center">
                <template slot-scope="text1">
                  <div
                    :style="[{ fontWeight: text1.itemName === '缴费合计' ? 700 : 400 }]"
                    :class="{ themColor: text1.itemName === '缴费合计' }"
                  >
                    {{ text1.amountCount }}
                  </div>
                </template>
              </a-table-column>
            </a-table>
          </div>
        </div>
      </a-modal>
      <a-modal :visible="shouDongBuChaVisible" title="撤销参保" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="submit" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="shouDongBuChaOkHandel">下一步</a-button>
        </template>
        <div style="font-weight: 500; font-size: 18px">存在未来月份的参保管理，是否需要更新参保信息？</div>
        <div style="color: #000; opacity: 0.8; margin-top: 20px">说明：根据补差修改的个人缴纳基数更新</div>
        <div style="margin-top: 20px">
          <a-radio-group v-model="typeValueTime" @change="onTypeChangeValue">
            <a-radio :value="1">不更新参保人信息</a-radio>
            <a-radio :value="2">更新参保人信息</a-radio>
          </a-radio-group>
        </div>
        <div v-if="typeValueTime === 2" style="margin-top: 20px">
          <a-select mode="multiple" placeholder="请选择要更改的时间" style="width: 300px" @change="handleTime">
            <a-select-option v-for="item in timeList" :key="item">{{ tranDate(item) }}</a-select-option>
          </a-select>
        </div>
      </a-modal>

      <!-- 撤销参保 -->
      <a-modal title="撤销参保" :visible="isUndoShebao" @ok="handleUndo" @cancel="handleCancel">
        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px" src="@/assets/icons/ask.png" />
          <!-- -->
          <div style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400">
            撤销参保后将删除本月参保记录，是否确认撤销{{ evName }}的参保？
          </div>
        </div>
      </a-modal>
      <a-modal title="暂无参保数据" :visible="isEmpy" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="submit" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="gotoZengyuan">去增员</a-button>
        </template>
        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px" src="@/assets/icons/ask.png" />
          <!-- -->
          <div style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400">该月无参保员工，如需参保，请先进行增员</div>
        </div>
      </a-modal>
      <!-- 撤销参保 -->
      <a-modal title="撤销参保" :visible="isUndoShebao2" @ok="handleUndo2" @cancel="handleCancel">
        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px" src="@/assets/icons/ask.png" />
          <!-- -->
          <div style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400">
            撤销参保后将删除本月参保记录，是否确认撤销{{ selectedRowKeys.length }}人的参保？
          </div>
        </div>
      </a-modal>

      <!-- 选择参保方案 -->
      <a-modal title="添加参保" :visible="isCloseMethod" width="600px" :destroy-on-close="true" @cancel="handleCancel">
        <template slot="footer">
          <a-button @click="privCancel">上一步</a-button>
          <a-button key="submit" type="primary" @click="finishEdit">确定</a-button>
        </template>
        <div style="padding: 0 56px">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
            <a-form-item class="baseInfo-item" label="参保月份">
              <span>{{ year }}年{{ month }}月</span>
            </a-form-item>
            <a-form-item label="参保方案" class="baseInfo-item">
              <a-select :default-value="defaultFangan" @change="chooseProgName">
                <a-select-option v-for="item in progNameList" :key="item.id">{{ item.progName }}</a-select-option>
              </a-select>
            </a-form-item>
            <div style="margin-bottom: 15px; margin-left: 70px; color: #000000; font-weight: 700">社保各项目基数</div>

            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
              <template v-for="(item, index) in formData">
                <a-form-item v-if="item.itemType === 1" :key="index" :label="item.itemName + '基数'" class="baseInfo-item">
                  <a-input-number
                    :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                    :max="item.cardinalityMax"
                    :min="item.cardinalityMin"
                    style="width: 100%"
                    @change="(val) => changeDefault(val, index)"
                  />
                  <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                </a-form-item>
              </template>
            </a-form>
            <div v-if="!payProvidentFund">
              <div style="margin-bottom: 15px; margin-left: 70px; color: #000000; font-weight: 700">公积金各项基数</div>
              <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
                <template v-for="(item, index) in formData">
                  <a-form-item v-if="item.itemType === 2" :key="index" :label="item.itemName + '基数'" class="baseInfo-item">
                    <a-input-number
                      :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                      :max="item.cardinalityMax"
                      :min="item.cardinalityMin"
                      @change="(val) => changeDefault(val, index)"
                    />
                    <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                  </a-form-item>
                </template>
              </a-form>
            </div>
            <a-form-item class="baseInfo-item" label="服务费">
              <a-input-number v-model="serviceCost" placeholder="每月服务费" :min="0" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
      <a-modal title="减员" :visible="Dvisible" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="DhandleOk">确定</a-button>
        </template>

        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px" src="@/assets/icons/ask.png" />

          <div style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400">
            减员后社保将有较大金额变动，确定对{{ jianyuanItem !== undefined ? jianyuanItem.name : "" }}进行减员？
          </div>
        </div>
      </a-modal>

      <a-modal title="减员" :visible="isStopShebao" width="800px" :destroy-on-close="true" @cancel="handleCancel">
        <template slot="footer">
          <a-button @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="finishjian">下一步</a-button>
        </template>
        <div v-if="stopyear == '' && stopmonth == '' && stopYByear == '' && stopYBmonth == '' && stopGjyear == '' && stopGjmonth == ''">
          没发现可用于减员的社保项
        </div>
        <div v-else>
          <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 7 }">
            <a-checkbox
              @change="onTypejianChange1"
              :checked="jianShebao"
              :disabled="jianShebao_2"
              v-if="stopyear !== '' && stopmonth !== ''"
              style="margin-left: 245px; margin-top: 15px; margin-bottom: 15px"
              >社保减员</a-checkbox
            >
            <a-form-item class="baseInfo-item" label="社保停保年月" v-if="stopyear !== '' && stopmonth !== ''">
              <a-month-picker
                :value="moment(stopyear + '-' + stopmonth, monthFormat)"
                @change="onStopYearMonthChange"
                :disabled-date="disabledDatejian"
                :disabled="!jianShebao"
              />
            </a-form-item>
            <a-checkbox
              @change="onTypejianChange2"
              :checked="jianYibao"
              :disabled="jianYibao_2"
              v-if="stopYByear !== '' && stopYBmonth !== ''"
              style="margin-left: 245px; margin-top: 15px; margin-bottom: 15px"
              >医保减员</a-checkbox
            >
            <a-form-item class="baseInfo-item" label="医保停保年月" v-if="stopYByear !== '' && stopYBmonth !== ''">
              <a-month-picker
                :value="moment(stopYByear + '-' + stopYBmonth, monthFormat)"
                @change="onStopYBYearMonthChange"
                :disabled-date="disabledDatejian"
                :disabled="!jianYibao"
              />
            </a-form-item>
            <a-checkbox
              @change="onTypejianChange3"
              :checked="jianGjj"
              :disabled="jianGjj_2"
              v-if="stopGjyear !== '' && stopGjmonth !== ''"
              style="margin-left: 245px; margin-top: 15px; margin-bottom: 15px"
              >公积金减员</a-checkbox
            >
            <a-form-item class="baseInfo-item" label="公积金封存年月" v-if="stopGjyear !== '' && stopGjmonth !== ''">
              <a-month-picker
                :value="moment(stopGjyear + '-' + stopGjmonth, monthFormat)"
                @change="onStopGJYearMonthChange"
                :disabled-date="disabledDatejian"
                :disabled="!jianGjj"
              />
            </a-form-item>
            <div
              style="color: #a6a8b4; font-size: 10px; margin-top: -10px; margin-left: 345px"
              v-if="stopGjyear !== '' && stopGjmonth !== ''"
            >
              如仅停缴公积金，请前往新建无参保公积金方案
            </div>
            <a-form-item class="baseInfo-item" label="服务费">
              <a-input-number
                v-model="JYserviceCost"
                placeholder="请输入服务费"
                :min="0"
                :precision="2"
                :disabled="(jianShebao || jianYibao || jianGjj) === false"
                style="width: 180px"
              />
            </a-form-item>
            <div style="color: #a6a8b4; font-size: 10px; margin-top: -10px; margin-left: 345px">
              服务费不填写默认不更改，填0即服务费改为0
            </div>
          </a-form>
        </div>
      </a-modal>

      <a-modal title="减员" :visible="Lvisible" width="500px" @cancel="LhandleOk">
        <template slot="footer">
          <a-button key="submit" type="primary" @click="LhandleOk">确定</a-button>
        </template>

        <div class="rowdalog2">
          <img style="width: 32px; height: 32px; margin-left: 10px" src="@/assets/img/overviewContract/icon4.png" />
          <div style="color: #3c3d43; font-size: 16px; margin-left: 10px">减员计划添加成功，查看计划请前往增减员计划内进行确认</div>
        </div>
        <div>
          <div style="color: #3c3d43; font-size: 16px; margin-left: 0px; margin-top: 40px; margin-bottom: 10px">减员计划结果</div>
          <a-table
            :columns="columnDialogDetailJianYuan"
            :pagination="pagination2"
            :data-source="dataDetail4"
            :scroll="{ x: 600 }"
            colspan="0"
            row-key="id"
            @change="handlePageChange2"
          >
            <template slot="socDescription" slot-scope="text, record">
              <span>{{ record.socDescription ? record.socDescription : "--" }}</span>
            </template>
            <template slot="meDescription" slot-scope="text, record">
              <span>{{ record.meDescription ? record.meDescription : "--" }}</span>
            </template>
            <template slot="pfDescription" slot-scope="text, record">
              <span>{{ record.pfDescription ? record.pfDescription : "--" }}</span>
            </template>
          </a-table>
        </div>
      </a-modal>

      <a-modal title="补收/补缴" :width="600" :visible="bushoubujiao1" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button :disabled="bushouTypeValue === 2 ? !hasGongjijin : false" key="submit" type="primary" @click="bushoubujiao1next">
            下一步
          </a-button>
        </template>
        <a-radio-group v-model="bushouTypeValue" @change="onSheBaoTypeChange" class="baseInfo-item">
          <a-radio :value="1">社保补收</a-radio>
          <a-radio :value="2">公积金补缴</a-radio>
        </a-radio-group>
        <div
          style="margin-top: 4px; color: #767885; font-size: 12px; font-weight: 400; margin-left: 120px; width: 320px; margin-bottom: 20px"
        >
          {{
            bushouTypeValue === 1
              ? "企业、机关事业可补收月数不能超过12个月，有雇工的个体工伤户可补收月数不能超过3个月"
              : "该人员所在参保方案不缴纳公积金，无法计算金额；若需补缴公积金，需更换参保方案。"
          }}
        </div>
        <div
          v-if="bushouTypeValue === 2 && !hasGongjijin"
          class="primary_color"
          style="margin-left: 230px; position: absolute; z-index: 10; font-size: 12px; margin-top: -38px"
          @click="gotoEdit"
        >
          前往编辑
        </div>
        <a-form-item label="参保方案" class="baseInfo-item" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
          <a-select v-model="progId" style="width: 230px" @change="chooseEditProgId">
            <a-select-option v-for="item in progNameList" :key="item.id">{{ item.progName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="补缴原因"
          class="baseInfo-item"
          v-if="bushouTypeValue === 2"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10 }"
        >
          <a-select :default-value="defaultFeiyongtest" style="width: 230px" @change="chooseTypetest">
            <a-select-option v-for="item in FeiyongtestList" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="起始年月" class="baseInfo-item" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
          <a-month-picker
            :value="shebaostartyear === '' ? '' : moment(shebaostartyear + '-' + shebaostartmonth, monthFormat)"
            :disabled-date="disabledDate"
            style="width: 230px"
            @change="onShebaoStartChange"
          />
        </a-form-item>
        <a-form-item label="终止年月" class="baseInfo-item" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
          <a-month-picker
            :value="shebaoendyear === '' ? '' : moment(shebaoendyear + '-' + shebaoendmonth, monthFormat)"
            :disabled-date="disabledDate"
            style="width: 230px"
            @change="onShebaoEndChange"
          />
        </a-form-item>
        <a-form-item label="费用归属" class="baseInfo-item" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
          <a-select :default-value="defaultFeiyong" style="width: 230px" @change="chooseType">
            <a-select-option v-for="item in FeiyongList" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="预收滞纳金" class="baseInfo-item" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
          <a-input-number v-model="zhanajin" :min="0" @change="onChangeZhiNajin" />
        </a-form-item>
        <a-form-item class="baseInfo-item" label="服务费">
          <a-input-number v-model="serviceCost" placeholder="每月服务费" :min="0" />
        </a-form-item>
        <div v-if="bushouTypeValue === 1">
          <div style="margin-bottom: 15px; margin-left: 100px; color: #000000; font-weight: 700">社保各项目基数</div>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
            <template v-for="(item, index) in formData">
              <a-form-item
                v-if="item.itemType === 1 || item.itemType === 3"
                :key="index"
                :label="item.itemName + '基数'"
                class="baseInfo-item"
              >
                <a-input-number
                  :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                  :max="item.cardinalityMax"
                  :min="item.cardinalityMin"
                  @change="(val) => changeDefault(val, index)"
                />
                <span style="margin-left: 0">基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}]</span>
              </a-form-item>
            </template>
          </a-form>
        </div>
        <div v-if="bushouTypeValue === 2 && !payProvidentFund">
          <div style="margin-bottom: 15px; margin-left: 100px; color: #000000; font-weight: 700">公积金各项基数</div>

          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
            <template v-for="(item, index) in formData">
              <a-form-item v-if="item.itemType === 2" :key="index" :label="item.itemName + '基数'" class="baseInfo-item">
                <a-input-number
                  :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                  :max="item.cardinalityMax"
                  :min="item.cardinalityMin"
                  @change="(val) => changeDefault(val, index)"
                />
                <span style="margin-left: 0">基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}]</span>
              </a-form-item>
            </template>
          </a-form>
        </div>
      </a-modal>

      <a-modal title="补收/补缴" :visible="bushouTable" width="1000px" :destroy-on-close="true" @cancel="handleCancel">
        <template slot="footer">
          <a-button @click="prviewBushou">上一步</a-button>
          <a-button key="submit" type="primary" @click="bushoubujiaof">确定</a-button>
        </template>
        <div class="headerTitle">
          <div class="block" />
          <div class="title-info">{{ bushouTypeValue === 1 ? "社保补收" : "公积金补缴" }}</div>
        </div>
        <div style="margin-bottom: 0px">
          <a-form>
            <a-table
              style="margin-top: 20px"
              :columns="clumnDetailGuding ? columnDialogDetailguding : columnDialogDetail"
              :data-source="dataDetail2"
              :scroll="{ x: 600, y: 300 }"
              :pagination="false"
              row-key="id"
            >
              <template slot="belongsDate" slot-scope="text">
                <span>{{ formatDate2(text) }}</span>
              </template>
              <template slot="persentCompany" slot-scope="text">
                <span>{{ text }}%</span>
              </template>
              <template slot="persentPersonal" slot-scope="text">
                <span>{{ text }}%</span>
              </template>
            </a-table>
          </a-form>
        </div>
      </a-modal>

      <a-modal title="补收/补缴" :visible="bushoubujiaook" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="submit" type="primary" @click="BushouBuJiaoOkHandle">确定</a-button>
        </template>

        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px; margin-top: 2px" src="@/assets/icons/duihao.png" />

          <div style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400">
            {{ bushouTypeValue === 1 ? "补收成功" : "补缴成功" }}
          </div>
        </div>

        <div style="display: flex; flex-direction: row; width: 100%; align-items: center">
          <div style="margin-top: 4px; color: #767885; font-size: 14px; font-weight: 400; margin-left: 40px">
            {{ bushouTypeValue === 1 ? "补收记录可在参保管理中查看" : "补缴记录可在参保管理中查看" }}
          </div>
          <div class="primary_color" style="font-size: 14px; margin-left: 6px; cursor: pointer" @click="canbaoguanli">点击跳转 ></div>
        </div>
        <div style="margin-top: 4px; color: #767885; font-size: 14px; font-weight: 400; margin-left: 40px">
          {{ bushouTypeValue === 1 ? "操作人员须在官网操作补收流程" : "操作人员须在官网操作补缴流程" }}
        </div>
      </a-modal>
      <!-- 添加参保选择员工 -->
      <a-modal title="批量导入" :visible="isDaoru" width="730px" @cancel="handleCancel">
        <!-- <div slot="footer" /> -->
        <template slot="footer">
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="ExportHandle">导入</a-button>
        </template>
        <div class="modal-box2" style="display: flex; justify-content: space-between">
          <div class="onwork">
            <a-upload
              name="file"
              :multiple="false"
              accept=".xls, .xlsx"
              @change="handleChange"
              :show-upload-list="false"
              :action="action"
              :custom-request="beforeUpload1"
            >
              <div class="staffInfo">
                <img style="width: 41px; height: 48px" src="../../../assets/img/上传.png" />
              </div>
              <div v-if="renliStatus === 0" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                {{ socFile ? socFile.name : "点击上传或拖拽上传" }}
              </div>
              <div class="rowdialog" v-else-if="renliStatus === 1">
                <img style="width: 14px; height: 14px; margin-right: 2px; margin-bottom: 0px" src="../../../assets/icons/duihao.png" />
                <div style="font-size: 14px; color: #55565d; margin-top: 12px; margin-bottom: 16px">上传成功</div>
              </div>

              <div v-else-if="renliStatus === 2">
                <div class="rowdialog">
                  <img
                    v-if="renliStatusFail === 0"
                    style="width: 14px; height: 14px; margin-right: 2px; margin-top: 12px; margin-bottom: 16px"
                    src="../../../assets/icons/失败.png"
                  />
                  <img
                    v-if="renliStatusFail === 1"
                    style="width: 14px; height: 14px; margin-right: 2px; margin-top: 12px; margin-bottom: 16px"
                    src="../../../assets/icons/重复.png"
                  />
                  <div v-if="renliStatusFail === 0" style="font-size: 14px; color: #55565d">上传失败</div>
                  <div v-if="renliStatusFail === 1" style="font-size: 14px; color: #55565d">上传重复</div>
                </div>
                <div class="primary_color" style="font-size: 12px; margin-bottom: 6px" @click.stop="renliClick(1)">查看名单</div>
                <div v-if="renliStatusFail === 0" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                  请查看名单后重新上传
                </div>
                <div v-if="renliStatusFail === 1" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                  继续导入将对原数据进行覆盖
                </div>
              </div>
              <div sytle="font-size:14px;color:#55565D;font-weight:bold;">人力资源和社会保障局表</div>
              <div sytle="font-size:14px;color:#55565D;font-weight:bold;">社保公积金统计表</div>
            </a-upload>
          </div>
          <div class="onwork" style="margin-left: 15px; margin-right: 15px">
            <a-upload
              name="file"
              :multiple="false"
              accept=".xls, .xlsx"
              @change="handleChange"
              :show-upload-list="false"
              :action="action"
              :custom-request="beforeUpload2"
            >
              <div class="staffInfo">
                <img style="width: 41px; height: 48px" src="../../../assets/img/上传.png" />
              </div>
              <div v-if="yibaoStatus === 0" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                {{ meFile ? meFile.name : "点击上传或拖拽上传" }}
              </div>
              <div class="rowdialog" v-else-if="yibaoStatus === 1">
                <img style="width: 14px; height: 14px; margin-right: 2px; margin-bottom: 0px" src="../../../assets/icons/duihao.png" />
                <div style="font-size: 14px; color: #55565d; margin-top: 12px; margin-bottom: 16px">上传成功</div>
              </div>

              <div v-else-if="yibaoStatus === 2">
                <div class="rowdialog">
                  <img
                    v-if="yibaoStatusFail === 0"
                    style="width: 14px; height: 14px; margin-right: 2px; margin-top: 12px; margin-bottom: 16px"
                    src="../../../assets/icons/失败.png"
                  />
                  <img
                    v-if="yibaoStatusFail === 1"
                    style="width: 14px; height: 14px; margin-right: 2px; margin-top: 12px; margin-bottom: 16px"
                    src="../../../assets/icons/重复.png"
                  />
                  <div v-if="yibaoStatusFail === 0" style="font-size: 14px; color: #55565d">上传失败</div>
                  <div v-if="renliStatusFail === 1" style="font-size: 14px; color: #55565d">上传重复</div>
                </div>
                <div class="primary_color" style="font-size: 12px; margin-bottom: 6px" @click.stop="renliClick(2)">查看名单</div>
                <div v-if="renliStatusFail === 0" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                  请查看名单后重新上传
                </div>
                <div v-if="renliStatusFail === 1" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                  继续导入将对原数据进行覆盖
                </div>
              </div>

              <div sytle="font-size:14px;color:#55565D;font-weight:bold">医疗保障局表</div>
            </a-upload>
          </div>
          <div class="onwork">
            <a-upload
              name="file"
              :multiple="false"
              accept=".xls, .xlsx"
              @change="handleChange"
              :show-upload-list="false"
              :action="action"
              :custom-request="beforeUpload3"
            >
              <div class="staffInfo">
                <img style="width: 41px; height: 48px" src="../../../assets/img/上传.png" />
              </div>
              <div v-if="gongjijinStatus === 0" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                {{ pfFile ? pfFile.name : "点击上传或拖拽上传" }}
              </div>
              <div class="rowdialog" v-else-if="gongjijinStatus === 1">
                <img style="width: 14px; height: 14px; margin-right: 2px; margin-bottom: 0px" src="../../../assets/icons/duihao.png" />
                <div style="font-size: 14px; color: #55565d; margin-top: 12px; margin-bottom: 16px">上传成功</div>
              </div>

              <div v-else-if="gongjijinStatus === 2">
                <div class="rowdialog">
                  <img
                    v-if="gongjijinStatusFail === 0"
                    style="width: 14px; height: 14px; margin-right: 2px; margin-top: 12px; margin-bottom: 16px"
                    src="../../../assets/icons/失败.png"
                  />
                  <img
                    v-if="gongjijinStatusFail === 1"
                    style="width: 14px; height: 14px; margin-right: 2px; margin-top: 12px; margin-bottom: 16px"
                    src="../../../assets/icons/重复.png"
                  />
                  <div v-if="gongjijinStatusFail === 0" style="font-size: 14px; color: #55565d">上传失败</div>
                  <div v-if="renliStatusFail === 1" style="font-size: 14px; color: #55565d">上传重复</div>
                </div>
                <div class="primary_color" style="font-size: 12px; margin-bottom: 6px" @click.stop="renliClick(3)">查看名单</div>
                <div v-if="renliStatusFail === 0" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                  请查看名单后重新上传
                </div>
                <div v-if="renliStatusFail === 1" style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">
                  继续导入将对原数据进行覆盖
                </div>
              </div>
              <div sytle="font-size:14px;color:#55565D;font-weight:bold">住房公积金表</div>
            </a-upload>
          </div>
        </div>
        <div
          style="
            background-color: #faf9f9;
            border-radius: 5px;
            padding-left: 15px;
            padding-top: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
          "
        >
          <div sytle="font-size:14px;color:#55565D;font-weight:bold;">温馨提示</div>
          <div style="font-size: 12px; color: #a6a8b4; margin-top: 12px">1、支持青岛地区用户导入从官方网站下载的</div>
          <div class="rowdalog2">
            <div style="font-size: 12px; color: #a6a8b4">2、其他地区用户下载“社保公积金统计表”模板，并上传至左侧上更改模板名称。</div>
            <div class="edit" style="font-size: 12px; margin-left: 5px; cursor: pointer" @click="download">下载标准模板</div>
          </div>
          <div class="rowdalog2">
            <div style="font-size: 12px; color: #a6a8b4">3、导入人员名单需在花名册中，否则需先至花名册中新建。</div>
            <div class="edit" style="font-size: 12px; margin-left: 5px; cursor: pointer" @click="huamingce">立即前往</div>
          </div>
        </div>
      </a-modal>

      <a-modal title="查看名单" :visible="looknames" width="800px" :destroy-on-close="true" @cancel="closeLookNms">
        <template slot="footer">
          <a-button key="submit" type="primary" @click="closeLookNms">确定</a-button>
        </template>
        <div style="margin-bottom: 0px">
          <a-table :columns="columnDialogName" :data-source="dataDetail3" :scroll="{ x: 500 }" colspan="0" row-key="id"></a-table>
        </div>
      </a-modal>
      <!-- 员工选择 -->
      <employee-select :show.sync="isChooseStaff" :state.sync="selectState" :year="year" :month="month" @change="onEmployeeSelectChange" />
      <employee-select2 :state.sync="selectState2" :show.sync="isChooseStaff2" @change="onEmployeeSelectChange2" />

      <employee-select3 :show.sync="isChooseStaff3" @change="onEmployeeSelectChange3" @cancel="handleCancel" />
      <screen :show.sync="isChooseStaff4" @change="differenceChange" :monthCurrent="monthCurrent" />
      <!-- 创建参保方案 -->
      <a-modal title="创建参保方案" :visible="isSetting" width="608px" @cancel="handleCancel">
        <div slot="footer" />
        <div class="modal-box">
          <h4>你还没有创建任何参保方案</h4>
          <div class="content-box">
            <div class="icon-box">
              <div class="img-box">
                <img class="icon" style="width: 48px; height: 48px" src="../../../assets/icons/plus.png" alt />
              </div>
              <p class="text">1.创建自主参保方案</p>
            </div>
            <span>_____</span>
            <div class="icon-box">
              <div class="img-box">
                <img class="icon" style="width: 48px; height: 48px" src="../../../assets/icons/face.png" alt />
              </div>
              <p class="text">2.返回本月添加参保人</p>
            </div>
            <span>_____</span>
            <div class="icon-box">
              <div class="img-box">
                <img class="icon" style="width: 48px; height: 48px" src="../../../assets/icons/right.png" alt />
              </div>
              <p class="text">3.添加参保成功</p>
            </div>
          </div>
          <a-button type="primary" class="set-btn" @click="toSetMethod">去创建参保方案</a-button>
        </div>
      </a-modal>
      <!-- :visible="" -->
      <a-modal title="提示" :visible="removeZengVisible" @cancel="handleCancel" @ok="remvoeZenyuanOkHandel">
        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px; margin-left: 40px" src="@/assets/icons/ask.png" />
          <!-- -->
          <div
            style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400"
            v-if="tempEmpSocStatus === 2 || tempEmpSocStatus === 3"
          >
            取消增员后将回到未参保状态，是否取消增员？
          </div>
          <!-- -->
          <div
            style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400"
            v-if="tempEmpSocStatus === 4 || tempEmpSocStatus === 5"
          >
            取消减员后将回到正常参保状态，是否取消减员？
          </div>
        </div>
        <a-radio-group
          style="margin-left: 90px; margin-top: 20px"
          v-model="typeValue"
          @change="onTypeChange"
          v-if="tempEmpSocStatus === 4 || tempEmpSocStatus === 5"
        >
          <a-radio :value="1">更新参保人信息</a-radio>
          <a-radio :value="2">删除人员参保记录</a-radio>
        </a-radio-group>
      </a-modal>

      <!-- 已参保人员提示 -->
      <a-modal title="提示" :visible="isExistName" @cancel="handleCancel">
        <div slot="footer">
          <a-button type="primary" @click="handleExistName">知道了</a-button>
        </div>
        <div class="exiset-box">
          <div class="title"><span>*</span>系统已自动跳过以下人员</div>
          <div class="member">已参保人员：</div>
          <div v-for="(item, index) in existName" :key="index" class="name">
            {{ item }}
            <span>的添加</span>
          </div>
        </div>
      </a-modal>
      <!-- 编辑参保信息 -->
      <a-modal title="编辑" width="600px" :visible="isShowShebaoInfo" @ok="submitEdit" @cancel="closeDrawer">
        <div>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
            <a-form-item label="参保方案" class="baseInfo-item">
              <a-select v-model="evprogName" @change="chooseEditProgName">
                <a-select-option v-for="item in progFilterList" :key="item.id">{{ item.progName }}</a-select-option>
              </a-select>
            </a-form-item>

            <!-- <div style="margin-bottom:15px;margin-left:120px;color:#000000;font-weight:700;" >
              社保各项目基数
            </div>-->
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
              <template v-for="(item, index) in formData">
                <a-form-item v-if="item.itemType === 1" :key="index" :label="item.itemName + '基数'" class="baseInfo-item">
                  <a-input-number
                    :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                    :max="item.cardinalityMax"
                    :min="item.cardinalityMin"
                    @change="(val) => changeDefault(val, index)"
                  />
                  <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                </a-form-item>
              </template>
            </a-form>
            <!-- <div style="margin-bottom:15px;margin-left:120px;color:#000000;font-weight:700;">
              医保各项目基数
            </div>-->
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
              <template v-for="(item, index) in formData">
                <a-form-item v-if="item.itemType === 3" :key="index" :label="item.itemName + '基数'" class="baseInfo-item">
                  <a-input-number
                    :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                    :max="item.cardinalityMax"
                    :min="item.cardinalityMin"
                    @change="(val) => changeDefault(val, index)"
                  />
                  <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                </a-form-item>
              </template>
            </a-form>
            <div v-if="!payProvidentFund">
              <!-- <div style="margin-bottom:15px;margin-left:120px;color:#000000;font-weight:700;">
                公积金各项基数
              </div>-->
              <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" class="baseInfo">
                <template v-for="(item, index) in formData">
                  <a-form-item v-if="item.itemType === 2" :key="index" :label="item.itemName + '基数'" class="baseInfo-item">
                    <a-input-number
                      :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                      :max="item.cardinalityMax"
                      :min="item.cardinalityMin"
                      @change="(val) => changeDefault(val, index)"
                    />
                    <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                  </a-form-item>
                </template>
              </a-form>
            </div>
            <a-form-item class="baseInfo-item" label="服务费">
              <a-input-number v-model="serviceCost" placeholder="每月服务费" :min="0" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
      <!-- 导出自定义表头 -->
      <a-modal
        title="自定义表头"
        :visible="ExportVisible"
        :maskClosable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        :width="800"
        @cancel="handleExportCancel"
      >
        <!-- 自定义表头 -->
        <Transfer
          ref="transfer"
          :defaultSelectedKeys="defaultSelectedKeys"
          :checkedKey="checkedKey"
          :transferData="selectAllHeadData"
        ></Transfer>
      </a-modal>
      <a-modal title="退费" width="600px" :visible="isTuifei" @ok="submitTuiFei" @cancel="handleCancel">
        <div>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
            <div style="margin-bottom: 15px; margin-left: 120px; color: #000000; font-weight: 700">
              <a-radio-group v-model="tuifeiType" @change="onRadioChange">
                <a-radio :value="1" :disabled="getShebao(1)">社保退费</a-radio>
                <a-radio :value="2" :disabled="getShebao(2)">医保退费</a-radio>
                <a-radio :value="3" :disabled="getShebao(3)">公积金退费</a-radio>
              </a-radio-group>
            </div>
            <a-form-item label="参保方案" class="baseInfo-item">
              <a-select v-model="defaultFangan" @change="chooseEditTuiFeiProgName">
                <a-select-option v-for="item in progTuiFeiFilterList" :key="item.id">{{ item.progName }}</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item class="baseInfo-item" label="起始年月">
              <a-month-picker
                style="width: 100%"
                :default-value="moment(stopTuiFeiyear + '-' + stopTuiFeimonth, monthFormat)"
                @change="onStopYearMonthChange_Tuifei"
                :disabled-date="disabledDateTuifei2"
              />
            </a-form-item>
            <a-form-item class="baseInfo-item" label="终止年月">
              <a-month-picker
                style="width: 100%"
                :default-value="moment(stopTuiFeiyear2 + '-' + stopTuiFeimonth2, monthFormat)"
                @change="onStopYearMonthChange_Tuifei2"
                :disabled-date="disabledDateTuiFei3"
              />
            </a-form-item>
            <a-form-item label="费用归属" class="baseInfo-item">
              <div>根据参保方案退费</div>
            </a-form-item>
            <div style="margin-bottom: 15px; margin-left: 90px; color: #000000; font-weight: 700" v-if="tuifeiType === 1">
              社保各项目基数
            </div>
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" class="baseInfo">
              <template v-for="(item, index) in formData">
                <a-form-item
                  v-if="item.itemType === 1 && tuifeiType === 1"
                  :key="index"
                  :label="item.itemName + '基数'"
                  class="baseInfo-item"
                >
                  <a-input-number
                    :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                    :max="item.cardinalityMax"
                    :min="item.cardinalityMin"
                    @change="(val) => changeDefault(val, index)"
                  />
                  <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                </a-form-item>
              </template>
            </a-form>
            <div style="margin-bottom: 15px; margin-left: 90px; color: #000000; font-weight: 700" v-if="tuifeiType === 2">
              医保各项目基数
            </div>
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" class="baseInfo">
              <template v-for="(item, index) in formData">
                <a-form-item
                  v-if="item.itemType === 3 && tuifeiType === 2"
                  :key="index"
                  :label="item.itemName + '基数'"
                  class="baseInfo-item"
                >
                  <a-input-number
                    :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                    :max="item.cardinalityMax"
                    :min="item.cardinalityMin"
                    @change="(val) => changeDefault(val, index)"
                  />
                  <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                </a-form-item>
              </template>
            </a-form>
            <div v-if="!payProvidentFund">
              <div style="margin-bottom: 15px; margin-left: 90px; color: #000000; font-weight: 700" v-if="tuifeiType === 3">
                公积金各项基数
              </div>
              <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" class="baseInfo">
                <template v-for="(item, index) in formData">
                  <a-form-item
                    v-if="item.itemType === 2 && tuifeiType === 3"
                    :key="index"
                    :label="item.itemName + '基数'"
                    class="baseInfo-item"
                  >
                    <a-input-number
                      :value="onlySocAmount ? item.cardinalityDefaultAmount : item.cardinalityDefault"
                      :max="item.cardinalityMax"
                      :min="item.cardinalityMin"
                      @change="(val) => changeDefault(val, index)"
                    />
                    <span style="margin-left: 0"> 基数范围[{{ item.cardinalityMin }}-{{ item.cardinalityMax }}] </span>
                  </a-form-item>
                </template>
              </a-form>
            </div>
            <a-form-item label="个人退费金额" class="baseInfo-item">
              <a-input-number :disabled="true" :value="personAmount" />
            </a-form-item>
            <a-form-item label="单位退费金额" class="baseInfo-item">
              <a-input-number :disabled="true" :value="companyAmount" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
      <a-modal title="退费成功" :visible="tuiFeiVisible" @cancel="handleCancel" @ok="handleCancel">
        <div class="rowdalog2">
          <img style="width: 30px; height: 30px; margin-right: 10px; margin-left: 40px" src="@/assets/icons/ask.png" />

          <div style="margin-top: 4px; color: #3c3d43; font-size: 16px; font-weight: 400">退费成功，请在参保管理中查看</div>
        </div>
      </a-modal>
    </a-layout>
    <div
      v-if="selectedRowKeys.length"
      class="table-body-footer"
      :class="selectedRowKeys.length > 0 || selectionBtnLock ? 'table-body-footer-enter' : 'table-body-footer-leave'"
      :style="{ width: `calc(100vw - ${188}px)`, left: `${188}px` }"
    >
      <div style="margin-left: 25px">
        选中 {{ selectedRowKeys.length }} 个
        <a-button type="link" :disabled="!selectedRowKeys.length" @click="cleanSelects">清除</a-button>
      </div>
      <a-button @click="TBFclose" class="mr12">取消</a-button>
      <a-button type="primary" :disabled="!selectedRowKeys.length" @click="exportExel()">导出</a-button>
    </div>
  </div>
</template>

<script>
import {
  getEmpSocCount,
  pageEmpSocInfo,
  getEnum,
  decEmpSocInfos,
  getListAllRelation,
  addSoc,
  setCardinality,
  deleteEmpSocInfos,
  remvoeZenyuanOk,
  remvoeJianyuanOk,
  changeEmpBatchRevocation,
  selectAllHead,
  bushou,
  getbushoudate,
  getMonthId,
  bujiao,
  listByCompanyIdGet,
  getChannels,
  selectSchemeByEmpSocInfoId,
  checkDecrease,
  deleteById,
  differenceOk
} from "@/api/shebao/shebaoInfo.js";
import { formatDate } from "@/utils/index";
import moment from "moment";
import { getDepartmentInTree, selectSchemeByEmpRelated, refunds } from "@/api/department/department";
import EmployeeSelect from "@/components/EmployeeSelect2/employeeSelect2";
import EmployeeSelect2 from "@/components/EmployeeSelect2/employeeSelect9";
import EmployeeSelect3 from "@/components/EmployeeSelect2/employeeSelect10";
import { AreaPicker as city } from "xqjr-plugin-common";
import UploadMixin from "xqjr-plugin-common/UploadOrExport/uploadMixin";
import CountTo from "vue-count-to";
import axios from "axios";
import screen from "./components/screen";
import { socTypeSource } from "./funcs";
const mixin = new UploadMixin();
import _ from "lodash";
import SelectWithInputAdd from "xqjr-plugin-form/components/XqSelectWithInputAdd.vue";
const columnDialogName = [
  {
    title: "行号",
    dataIndex: "rowIndex",
    fixed: "left",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "姓名",
    dataIndex: "empName",
    align: "center",
    ellipsis: true,
    width: 150
  },
  {
    title: "缴费类型",
    dataIndex: "payCostType",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "原因",
    dataIndex: "result",
    align: "center",
    ellipsis: true
  }
];
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    align: "center",
    fixed: "left",
    ellipsis: true,
    width: 120,
    isEdit: false,
    colDefault: true
  },
  {
    title: "手机号",
    dataIndex: "phone",
    scopedSlots: { customRender: "phone" },
    ellipsis: true,
    width: 120,
    colDefault: true
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    scopedSlots: { customRender: "idCard" },
    ellipsis: true,
    width: 200,
    colDefault: true
  },
  {
    title: "社保状态",
    dataIndex: "empSocStatus",
    align: "center",
    scopedSlots: { customRender: "empSocStatus" },
    ellipsis: true,
    width: 130,
    colDefault: true
  },
  {
    title: "医保状态",
    dataIndex: "empMeStatus",
    align: "center",
    scopedSlots: { customRender: "empMeStatus" },
    ellipsis: true,
    width: 130,
    colDefault: true
  },
  {
    title: "公积金状态",
    dataIndex: "empPfStatus",
    align: "center",
    scopedSlots: { customRender: "empPfStatus" },
    ellipsis: true,
    width: 130,
    colDefault: true
  },
  {
    title: "户口类型",
    dataIndex: "regType",
    align: "center",
    scopedSlots: { customRender: "regType" },
    ellipsis: true,
    width: 100,
    colDefault: true
  },
  {
    title: "参保月份",
    dataIndex: "month",
    scopedSlots: { customRender: "month" },
    align: "center",
    ellipsis: true,
    width: 100,
    colDefault: true
  },
  {
    title: "缴费类型",
    dataIndex: "payCostType",
    scopedSlots: { customRender: "payCostType" },
    align: "center",
    ellipsis: true,
    width: 100,
    colDefault: true
  },
  {
    title: "参保方案",
    dataIndex: "progName",
    align: "center",
    ellipsis: true,
    width: 100,
    colDefault: true
  },
  {
    title: "参保城市",
    dataIndex: "socCityName",
    align: "center",
    ellipsis: true,
    width: 130,
    colDefault: true
  },
  {
    title: "社保账号",
    dataIndex: "socAccount",
    scopedSlots: { customRender: "socAccount" },
    align: "center",
    ellipsis: true,
    width: 150
  },
  {
    title: "医保账号",
    dataIndex: "meAccount",
    scopedSlots: { customRender: "meAccount" },
    align: "center",
    ellipsis: true,
    width: 150
  },
  {
    title: "公积金账号",
    dataIndex: "pfAccount",
    scopedSlots: { customRender: "pfAccount" },
    align: "center",
    ellipsis: true,
    width: 150
  },
  {
    title: "签约主体",
    dataIndex: "contractSubject",
    scopedSlots: { customRender: "contractSubject" },
    align: "center",
    ellipsis: true,
    width: 150
  },
  {
    title: "个人社保费",
    dataIndex: "personalSocAmount",
    align: "center",
    ellipsis: true,
    width: 105,
    colDefault: true
  },
  {
    title: "单位社保费",
    dataIndex: "companySocAmount",
    align: "center",
    ellipsis: true,
    width: 105,
    colDefault: true
  },
  {
    title: "个人公积金费",
    dataIndex: "personalPfAmount",
    align: "center",
    ellipsis: true,
    width: 150,
    colDefault: true
  },
  {
    title: "单位公积金费",
    dataIndex: "companyPfAmount",
    align: "center",
    ellipsis: true,
    width: 150,
    colDefault: true
  },
  {
    title: "服务费",
    dataIndex: "serviceCost",
    scopedSlots: { customRender: "serviceCost" },
    ellipsis: true,
    width: 90,
    colDefault: true
  },
  {
    title: "滞纳金",
    dataIndex: "socialSecurityFine",
    scopedSlots: { customRender: "socialSecurityFine" },
    ellipsis: true,
    width: 90,
    colDefault: false
  },
  {
    title: "退费开始时间",
    dataIndex: "refundsBeginTime",
    scopedSlots: { customRender: "refundsBeginTime" },
    ellipsis: true,
    width: 120,
    colDefault: false
  },
  {
    title: "退费结束时间",
    dataIndex: "refundsEndTime",
    scopedSlots: { customRender: "refundsEndTime" },
    ellipsis: true,
    width: 120,
    colDefault: false
  },
  {
    title: "退费类型",
    dataIndex: "refundsType",
    scopedSlots: { customRender: "refundsType" },
    ellipsis: true,
    width: 120,
    colDefault: false
  },
  {
    title: "渠道",
    dataIndex: "channelName",
    scopedSlots: { customRender: "channelName" },
    ellipsis: true,
    width: 120,
    colDefault: false
  },
  {
    title: "标签",
    dataIndex: "tag",
    scopedSlots: { customRender: "tag" },
    ellipsis: true,
    width: 120,
    colDefault: false
  },
  {
    title: "备注",
    dataIndex: "remark",
    scopedSlots: { customRender: "remark" },
    ellipsis: true,
    width: 120,
    colDefault: false
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
    fixed: "right",
    width: 80,
    ellipsis: true
  }
];
const columnDialogDetailJianYuan = [
  {
    title: "姓名",
    dataIndex: "empName",
    fixed: "left",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "社保",
    dataIndex: "socDescription",
    scopedSlots: { customRender: "socDescription" },
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "医保",
    dataIndex: "meDescription",
    align: "center",
    scopedSlots: { customRender: "meDescription" },
    ellipsis: true,
    width: 100
  },
  {
    title: "公积金",
    dataIndex: "pfDescription",
    align: "center",
    scopedSlots: { customRender: "pfDescription" },
    ellipsis: true,
    width: 100
  }
];
const columnDialogDetail = [
  {
    title: "所属时间",
    dataIndex: "belongsDate",
    scopedSlots: { customRender: "belongsDate" },
    fixed: "left",
    align: "center",
    ellipsis: true,
    width: 120
  },
  {
    title: "个人缴纳基数",
    dataIndex: "cardinalityDefault",
    align: "center",
    ellipsis: true,
    width: 120
  },
  {
    title: "险种类型",
    dataIndex: "itemName",
    align: "center",
    ellipsis: true,
    width: 110
  },
  {
    title: "单位缴纳比例",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" },
    align: "center",
    ellipsis: true,
    width: 120
  },

  {
    title: "单位金额",
    dataIndex: "amountCompany",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "个人缴纳比例",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" },
    align: "center",
    ellipsis: true,
    width: 120
  },
  {
    title: "个人金额",
    dataIndex: "amountPersonal",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "合计",
    dataIndex: "allAmount",
    align: "center",
    ellipsis: true,
    width: 80
  }
];
const columnDialogDetailguding = [
  {
    title: "所属时间",
    dataIndex: "belongsDate",
    scopedSlots: { customRender: "belongsDate" },
    fixed: "left",
    align: "center",
    ellipsis: true,
    width: 120
  },
  {
    title: "个人缴纳基数",
    dataIndex: "cardinalityDefault",
    align: "center",
    ellipsis: true,
    width: 120
  },
  {
    title: "险种类型",
    dataIndex: "itemName",
    align: "center",
    ellipsis: true,
    width: 110
  },

  {
    title: "单位金额",
    dataIndex: "amountCompany",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "个人金额",
    dataIndex: "amountPersonal",
    align: "center",
    ellipsis: true,
    width: 100
  },
  {
    title: "合计",
    dataIndex: "allAmount",
    align: "center",
    ellipsis: true,
    width: 80
  }
];
export default {
  mixins: [mixin],
  components: {
    SelectWithInputAdd,
    EmployeeSelect,
    EmployeeSelect2,
    EmployeeSelect3,
    city,
    CountTo,
    screen
  },
  data() {
    return {
      socTypeSource,
      columns,
      showTable: true,
      labelList: [],
      channelNames: [],
      zhanajin: 0,
      recordList: [],
      isChooseStaff4: false,
      userId: "",
      renliStatus: 0, // 0拖拽，1成功，2失败
      renliStatusFail: 0, // 0失败，1重复
      headVisible: false,
      yibaoStatus: 0, // 0拖拽，1成功，2失败
      yibaoStatusFail: 0, // 0失败，1重复

      gongjijinStatus: 0, // 0拖拽，1成功，2失败
      gongjijinStatusFail: 0, // 0失败，1重复
      isTuifei: false,
      tuifeiType: 1,
      looknames: false, // 失败人员名单
      serviceCost: 0,
      shebaostartyear: "",
      shebaostartmonth: "",
      shebaoStartDate: 0,
      xiangqing: false,
      shebaoendyear: "",
      shebaoendmonth: "",
      shebaoEndDate: 0,
      personAmount: 0,
      companyAmount: 0,
      defaultFeiyong: 1,
      FeiyongList: [
        { id: 1, name: "全部个人缴纳" },
        { id: 2, name: "全部单位缴纳" },
        { id: 3, name: "正常参保方案缴纳" }
      ],
      dataDetail3: [],
      shebaoErro: [],
      gongjijinErro: [],
      yibaoErro: [],
      defaultFeiyongtest: 1,
      FeiyongtestList: [
        { id: 1, name: "逾期补缴" },
        { id: 2, name: "少缴补缴" }
      ],
      tempId: "",
      defaultFangan: 0,
      action: "",
      ExportVisible: false,
      confirmLoading: false,
      defaultSelectedKeys: [],
      checkedKey: {
        checkedKeys: [],
        rightData: []
      },
      selectAllHeadData: [], // 导出表头信息
      isDaoru: false,
      topData: [
        {
          title: "在保人数",
          num: 0,
          empIdList: [],
          url: require("@/assets/shebao/全部.png")
        },
        {
          title: "正常参保人数",
          num: 0,
          empIdList: [],
          url: require("@/assets/shebao/正常.png")
        },
        {
          title: "增员人数",
          num: 0,
          empIdList: [],
          url: require("@/assets/shebao/停保.png")
        },
        {
          title: "减员人数",
          num: 0,
          empIdList: [],
          url: require("@/assets/shebao/正常参保.png")
        }
      ],
      shouDongBuChaVisible: false,
      typeValueTime: 1,
      lastDt: [],
      dateList: [],
      timeList: [],
      dateOpen: false,
      cutYear: "",
      companyDifference: undefined,
      personalDifference: undefined,
      nameDifference: undefined,
      cutMonth: "",
      depId: "",
      typeValue: 1,
      searchName: null,
      // columnStopDetail,
      tempEmpSocStatus: 0,
      isExistName: false,
      empcompanyPfAmount: "",
      empcompanySocAmount: "",
      emppersonalPfAmount: "",
      emppersonalSocAmount: "",
      isUndoShebao: false,
      isUndoShebao2: false,
      tuiFeiVisible: false,
      singleUndoShebao: true,
      isShowShebaoInfo: false,
      progNameList: [],
      dataDetail4: [],
      socPayCostTypeMap: [],
      shebaoDetailList: [],
      isCloseMethod: false,
      isSetting: false,
      columnDialogName,
      columnDialogDetailguding,
      clumnDetailGuding: false,
      columnDialogDetailJianYuan,
      dataDetail2: [],
      // isStaffInfo: false,
      depInfoOptions: [],
      isChooseStaff: false,
      isChooseStaff2: false,
      isChooseStaff3: false,
      monthFormat: "YYYY-MM",
      dataDetail: [],
      dataStopDetail: [],
      topStatus: "",
      empSocStatus: undefined,
      empMeStatus: undefined,
      empPfStatus: undefined,
      socCityName: "",
      existName: [],
      socPayCostType: undefined,
      // existEmpId: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共${total}条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.defaultCurrent = pageSize;
        }
      },
      pagination2: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共${total}条`,
        showQuickJumper: true
        // showSizeChanger: true
      },
      // currType: "total",
      searchForm: {},
      isStopShebao: false,
      isShebaoBase: true,
      isGongJJBase: true,
      isEmpy: false,
      differenceVisible: false,
      socRefunds: false,
      meRefunds: false,
      pfRefunds: false,
      empSocInfoCount: "",
      allCount: "",
      monthIncrement: "",
      columnDialogDetail,
      monthStop: "",
      personalSocAmount: 0,
      companySocAmount: 0,
      personalPfAmount: 0,
      companyPfAmount: 0,
      serviceCostAmount: 0,
      bushoubujiaook: false,
      accumulationFundFine: 0,
      socialSecurityFine: 0,

      totalAmount: 0,
      personalDifferenceAmount: 0,
      companyDifferenceAmount: 0,
      jianyuanItem: undefined,
      bushouTable: false,
      bushoubujiao1: false,
      progName: "",
      monthYear: "",
      selectState: 0,
      selectState2: 0,

      id: "",
      monthNext: "",
      monthPrevious: "",
      monthCurrent: "",
      year: "",
      month: "",
      progId: "", // 方案id
      progIdser: undefined,
      staffList: [],
      formData: [],
      tags: [],
      selectedRowKeys: [], // 多选
      defaultCard: 0, // 社保设置全部的基数
      defaultGongjiJin: 0, // 公积金基数
      // socProgAddDTO: [],
      evName: "",
      evIdCard: "",
      evDepName: "",
      evsocCityName: "",
      evprogName: "",

      evprogId: "",
      evpfCard: "",
      socCard: "",
      bushouTypeValue: 1,
      empId: "",
      progKeyId: "",
      keyId: "",
      // allowAdd: false,
      empPhoto: "",
      hasGongjijin: true,
      socCity: "",
      Dvisible: false,
      currentDetail: null,
      databushou: [],
      regType: undefined,
      channelId: undefined,
      currentItem: undefined,
      meFile: undefined,
      pfFile: undefined,
      socFile: undefined,
      isChooseStaffLeave: false,
      empMonthList: [],
      removeZengVisible: false,
      payProvidentFund: false, // 是否缴纳公积金
      onlySocAmount: false, // 仅设置参保金额
      active: 0,
      progFilterList: [],
      progTuiFeiFilterList: [],
      params: {
        templateName: "batchImportSocTemplate.xlsx"
      },
      url: `/hr/api/v1/excel/template/download`,
      excelName: "社保公积金统计表.xlsx",
      inApproval: false, // 是否在审批中
      monthWhetherCurrent: true, // 是否是当前月
      liststatus: [
        { value: "待入职", id: "1" },
        { value: "在职", id: "2" },
        { value: "待离职", id: "3" },
        { value: "离职", id: "4" }
      ],
      rStatus: undefined,
      selectedHead: [],
      jianShebao: false,
      jianYibao: false,
      jianGjj: false,
      jianShebao_2: true,
      jianYibao_2: true,
      jianGjj_2: true,
      stopyear: "",
      stopmonth: "",
      stopTuiFeiyear: "",
      stopTuiFeimonth: "",
      stopTuiFeiyear2: "",
      stopTuiFeimonth2: "",
      JYserviceCost: undefined,
      stopYByear: "",
      stopYBmonth: "",
      empIdListDiff: [],
      stopGjyear: "",
      stopGjmonth: "",
      Lvisible: false,
      drag: false,
      tempDate: "",
      selectionBtnLock: false,
      dparams: {},
      socAccount: null,
      meAccount: null,
      pfAccount: null,
      contractSubject: null
    };
  },
  computed: {
    tableHeadParams() {
      return {
        subjectId: this.$store.state.hr.companyId,
        "orders[0].property": "sort",
        "orders[0].desc": false,
        moduleCode: "shebao4",
        monthId: this.monthCurrent
      };
    }
  },
  watch: {
    socAccount(v) {
      if (v) {
        this.dparams.socAccount = v;
      } else {
        delete this.dparams.socAccount;
      }
    },
    meAccount(v) {
      if (v) {
        this.dparams.meAccount = v;
      } else {
        delete this.dparams.meAccount;
      }
    },
    pfAccount(v) {
      if (v) {
        this.dparams.pfAccount = v;
      } else {
        delete this.dparams.pfAccount;
      }
    },
    contractSubject(v) {
      if (v) {
        this.dparams.contractSubject = v;
      } else {
        delete this.dparams.contractSubject;
      }
    },
    selectedRowKeys(v) {
      if (v.length > 0) this.selectionBtnLock = true;
    },
    channelId(v) {
      if (v) {
        this.dparams.channelId = v;
      } else {
        delete this.dparams.channelId;
      }
    },
    tags(v) {
      if (v) {
        if (v.join(",")) {
          this.dparams.tag = v.join(",");
        } else {
          delete this.dparams.tag;
        }
      } else {
        delete this.dparams.tag;
      }
    },
    regType(v) {
      if (v) {
        this.dparams.regType = v;
      } else {
        delete this.dparams.regType;
      }
    },
    searchName(v) {
      if (v) {
        this.dparams.name = v;
      } else {
        delete this.dparams.name;
      }
    },
    progIdser(v) {
      if (v) {
        this.dparams.socProgId = v;
      } else {
        delete this.dparams.socProgId;
      }
    },
    socPayCostType(v) {
      if (v) {
        this.dparams.socPayCostType = v;
      } else {
        delete this.dparams.socPayCostType;
      }
    },
    rStatus(v) {
      if (v) {
        this.dparams.status = v;
      } else {
        delete this.dparams.status;
      }
    },
    empSocStatus(v) {
      if (v) {
        this.dparams.empSocStatus = v;
      } else {
        delete this.dparams.empSocStatus;
      }
    },
    empMeStatus(v) {
      if (v) {
        this.dparams.empMeStatus = v;
      } else {
        delete this.dparams.empMeStatus;
      }
    },
    empPfStatus(v) {
      if (v) {
        this.dparams.empPfStatus = v;
      } else {
        delete this.dparams.empPfStatus;
      }
    }
  },
  created() {
    if (JSON.stringify(this.$getCondition("cbgl_condition")) !== "{}") {
      this.dparams = JSON.parse(this.$getCondition("cbgl_condition"));
      if (this.dparams.companyIdc && this.dparams.companyIdc === this.$store.state.hr.companyId) {
        if (this.dparams.channelId) {
          this.channelId = this.dparams.channelId;
        }
        if (this.dparams.tag) {
          this.tags = this.dparams.tag.split(",");
        }
        if (this.dparams.regType) {
          this.regType = this.dparams.regType;
        }
        if (this.dparams.month) {
          this.month = this.dparams.month;
        }
        if (this.dparams.year) {
          this.year = this.dparams.year;
        }
        if (this.dparams.name) {
          this.searchName = this.dparams.name;
        }
        if (this.dparams.socCity) {
          this.socCityName = this.dparams.socCity;
        }
        if (this.dparams.depId) {
          this.depId = this.dparams.depId;
        }
        if (this.dparams.socProgId) {
          this.progIdser = this.dparams.socProgId;
        }
        if (this.dparams.monthId) {
          this.monthCurrent = this.dparams.monthId;
        }
        if (this.dparams.socPayCostType) {
          this.socPayCostType = this.dparams.socPayCostType;
        }
        if (this.dparams.status) {
          this.rStatus = this.dparams.status;
        }
        if (this.dparams.topStatus) {
          this.active = this.dparams.topStatus === 4 ? 3 : this.dparams.topStatus;
        }
        // 读取缓存
        if (this.$getPage("cbgl_condition")) {
          this.pagination.current = parseInt(this.$getPage("cbgl_condition")) === 0 ? 1 : parseInt(this.$getPage("cbgl_condition"));
        }
        if (this.$getPageSize("cbgl_condition")) {
          this.pagination.pageSize =
            parseInt(this.$getPageSize("cbgl_condition")) === 0 ? 10 : parseInt(this.$getPageSize("cbgl_condition"));
        }
      }
    }

    getDepartmentInTree({ companyId: this.$store.state.hr.companyId }).then((res) => {
      this.depInfoOptions = this.tree1(res.data, "depChildList", false);
    });
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.year = this.$route.query.year;
      this.month = this.$route.query.month;
      this.dparams.month = this.month;
      this.dparams.year = this.year;
      getMonthId({
        companyId: this.$store.state.hr.companyId,
        month: this.month,
        year: this.year
      }).then((res) => {
        this.monthNext = res.data.monthIdNext;
        this.monthPrevious = res.data.monthIdPrevious;
        this.monthCurrent = res.data.monthCurrent;
        this.dparams.monthId = res.data.monthCurrent;
        this.inApproval = res.data.monthCurrentCanNotEdited;
        this.monthWhetherCurrent = res.data.monthWhetherCurrent;
        this.checkPeopleAmount(true);
      });
    } else {
      const nowDate = new Date();
      this.year = "" + nowDate.getFullYear();
      this.month = nowDate.getMonth() + 1;
      if (this.month < 10) {
        this.month = "0" + this.month;
      }
      this.dparams.month = this.month;
      this.dparams.year = this.year;
    }
    const nowDate = new Date();
    this.stopyear = "" + nowDate.getFullYear();
    this.stopmonth = this.month;
    this.stopYByear = "" + nowDate.getFullYear();
    this.stopYBmonth = this.month;
    this.stopGjyear = "" + nowDate.getFullYear();
    this.stopGjmonth = this.month;

    this.stopTuiFeiyear = "" + nowDate.getFullYear();
    this.stopTuiFeimonth = this.month;

    this.stopTuiFeiyear2 = "" + nowDate.getFullYear();
    this.stopTuiFeimonth2 = this.month;

    this.searchShebaoInfo();
    this.checkShebaoMethod();

    this.getEnum();
    this.getListByCompanyId();
    this.getChannelsList();
  },
  mounted() {},
  methods: {
    differenceOk() {
      if (!this.nameDifference) {
        this.$message.warning("请填写差额费用名称");
      } else {
        differenceOk({
          companyId: this.$store.state.hr.companyId,
          empIdList: this.empIdListDiff,
          differenceName: this.nameDifference,
          personalDifference: this.personalDifference,
          companyDifference: this.companyDifference,
          monthId: this.monthCurrent
        })
          .then((res) => {
            this.$refs.tbody.init();
            this.$message.success("更新成功");
            this.checkPeopleAmount(false);
            this.searchShebaoInfo();
            this.differenceVisible = false;
          })
          .catch((err) => {
            console.log(err);
            this.differenceVisible = false;
          });
      }
    },
    handlePageChange2(pagination, filters, sorter) {
      this.pagination2.current = pagination.current;
      this.pagination2.pageSize = pagination.pageSize;
    },
    getTuiTime(txt) {
      if (txt) {
        return moment(txt).format(this.monthFormat);
      } else {
        return "--";
      }
    },
    onRadioChange(e) {
      this.tuifeiType = e.target.value;
      this.getFeiYong();
    },
    // 禁止拖动到id为1的对象
    onMove(e) {
      if (e.relatedContext.element.title === "姓名") return false;
      return true;
    },
    // 开始拖拽事件
    onStart() {
      this.drag = true;
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    cleanSelects() {
      this.selectedRowKeys = [];
    },
    TBFclose() {
      this.selectedRowKeys = [];
      this.selectionBtnLock = false;
    },
    gotoZengyuan() {
      this.isEmpy = false;
      this.$router.push({
        path: "/shebao/shebaoManage/shebaoZengJianY"
      });
    },
    LhandleOk() {
      this.Lvisible = false;
    },
    disabledDatejian(current) {
      // 只能选择当月往后的月份
      return current && current < moment().startOf("month"); // 月份第一天
    },
    onStopYearMonthChange_Tuifei(date, dateString) {
      const s = dateString.split("-");
      this.stopTuiFeiyear = s[0];
      this.stopTuiFeimonth = s[1];
      this.getFeiYong();
    },
    onStopYearMonthChange_Tuifei2(date, dateString) {
      const s = dateString.split("-");
      this.stopTuiFeiyear2 = s[0];
      this.stopTuiFeimonth2 = s[1];
      this.getFeiYong();
    },
    getFeiYong() {
      this.personAmount = 0;
      this.companyAmount = 0;
      if (!this.onlySocAmount) {
        for (var i = 0; i < this.formData.length; i++) {
          if (this.tuifeiType === 1 && this.formData[i].itemType === 1) {
            this.personAmount += this.formData[i].cardinalityDefault * this.formData[i].persentPersonal * 0.01;
            this.companyAmount += this.formData[i].cardinalityDefault * this.formData[i].persentCompany * 0.01;
          } else if (this.tuifeiType === 2 && this.formData[i].itemType === 3) {
            this.personAmount += this.formData[i].cardinalityDefault * this.formData[i].persentPersonal * 0.01;
            this.companyAmount += this.formData[i].cardinalityDefault * this.formData[i].persentCompany * 0.01;
          } else if (this.tuifeiType === 3 && this.formData[i].itemType === 2) {
            this.personAmount += this.formData[i].cardinalityDefault * this.formData[i].persentPersonal * 0.01;
            this.companyAmount += this.formData[i].cardinalityDefault * this.formData[i].persentCompany * 0.01;
          }
        }
        const t1 = moment(this.stopTuiFeiyear + "-" + this.stopTuiFeimonth, this.monthFormat);
        const t2 = moment(this.stopTuiFeiyear2 + "-" + this.stopTuiFeimonth2, this.monthFormat);

        this.personAmount = this.personAmount * (t2.diff(t1, "month") + 1);
        this.companyAmount = this.companyAmount * (t2.diff(t1, "month") + 1);

        if (this.defaultFangan) {
          for (i = 0; i < this.progTuiFeiFilterList.length; i++) {
            if (this.progTuiFeiFilterList[i].id === this.defaultFangan) {
              this.personAmount = this.calculationDot(
                this.progTuiFeiFilterList[i].socProgItemVOList[0].mantissaProcPersonal,
                NP.strip(this.personAmount)
              );
              this.companyAmount = this.calculationDot(
                this.progTuiFeiFilterList[i].socProgItemVOList[0].mantissaProcCompany,
                NP.strip(this.companyAmount)
              );
              break;
            }
          }
        }
      } else {
        for (var j = 0; j < this.formData.length; j++) {
          if (this.tuifeiType === 1 && this.formData[j].itemType === 1) {
            this.personAmount += this.formData[j].amountPersonal;
            this.companyAmount += this.formData[j].amountCompany;
          } else if (this.tuifeiType === 2 && this.formData[j].itemType === 3) {
            this.personAmount += this.formData[j].amountPersonal;
            this.companyAmount += this.formData[j].amountCompany;
          } else if (this.tuifeiType === 3 && this.formData[j].itemType === 2) {
            this.personAmount += this.formData[j].amountPersonal;
            this.companyAmount += this.formData[j].amountCompany;
          }
        }
        const t1 = moment(this.stopTuiFeiyear + "-" + this.stopTuiFeimonth, this.monthFormat);
        const t2 = moment(this.stopTuiFeiyear2 + "-" + this.stopTuiFeimonth2, this.monthFormat);

        this.personAmount = this.personAmount * (t2.diff(t1, "month") + 1);
        this.companyAmount = this.companyAmount * (t2.diff(t1, "month") + 1);

        if (this.defaultFangan) {
          for (i = 0; i < this.progTuiFeiFilterList.length; i++) {
            if (this.progTuiFeiFilterList[i].id === this.defaultFangan) {
              this.personAmount = this.calculationDot(
                this.progTuiFeiFilterList[i].socProgItemVOList[0].mantissaProcPersonal,
                NP.strip(this.personAmount)
              );
              this.companyAmount = this.calculationDot(
                this.progTuiFeiFilterList[i].socProgItemVOList[0].mantissaProcCompany,
                NP.strip(this.companyAmount)
              );
            }
          }
        }
      }
    },
    // 计算小数点
    calculationDot(type, value) {
      console.log(type + "/" + value);
      switch (type) {
        case 0: // 不处理
          var s = value.toString().split(".");
          if (s.length === 1) {
            return s + ".00";
          } else {
            if (s[1].length === 1) {
              s[1] = s[1] + "0";
            }
            return s[0] + "." + s[1];
          }
        case 1: // 四舍五入到元
          return this.siWuDot(value, 0);
        case 2: // 四舍五入到角
          return this.siWuDot(value, 1);
        case 3: // 四舍五入到分
          return this.siWuDot(value, 2);
        case 4: // 四舍五入到厘
          return this.siWuDot(value, 3);
        case 5: // 四舍五入到小数点后4位
          return this.siWuDot(value, 4);
        case 6: // 见厘进分
          return this.jieQueDot(value, 2);
        case 7: // 见分进角
          return this.jieQueDot(value, 1);
        case 8: // 见角进元
          return this.jieQueDot(value, 0);
        case 9: // 见角舍去
          return this.sheQuDot(value, 0);
        case 10: // 见分舍去
          return this.sheQuDot(value, 1);
        case 11: // 见厘舍去
          return this.sheQuDot(value, 2);
      }
    },
    // 四舍五入
    siWuDot(value, n) {
      var f = Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
      var s = f.toString();
      var rs = s.indexOf(".");
      if (n !== 0 && rs < 0) {
        s += ".";
      }

      for (var i = s.length - s.indexOf("."); i <= n; i++) {
        s += "0";
      }
      if (n === 0) {
        s += ".00";
      }
      return s;
    },
    // 进1截取
    jieQueDot(value, n) {
      const f = value.toString();
      const s = f.split(".");
      if (s.length === 1) {
        return s + ".00";
      } else {
        if (n !== 0) {
          if (s[1].length > n) {
            const n = Number(s[1].substring(0, n));
            const n2 = n + 1;
            s[1] = n2.toString();
          } else if (s[1].length < n) {
            const c = n - s[1].length;
            for (var i = 0; i < c; i++) {
              s[1] += "0";
            }
          }
          return s[0] + "." + s[1];
        } else {
          const n = Number(s[0]) + 1;
          return n + ".00";
        }
      }
    },
    // 直接舍去
    sheQuDot(value, n) {
      const f = value.toString();
      const s = f.split(".");
      if (s.length === 1) {
        return s + ".00";
      } else {
        if (n !== 0) {
          if (s[1].length > n) {
            s[1] = s[1].substring(0, n);
          } else if (s[1].length < n) {
            const c = n - s[1].length;
            for (var i = 0; i < c; i++) {
              s[1] += "0";
            }
          }
          return s[0] + "." + s[1];
        } else {
          return s[0] + ".00";
        }
      }
    },
    // 停供社保
    onStopYearMonthChange(date, dateString) {
      const s = dateString.split("-");
      this.stopyear = s[0];
      this.stopmonth = s[1];
    },
    onStopYBYearMonthChange(date, dateString) {
      const s = dateString.split("-");
      this.stopYByear = s[0];
      this.stopYBmonth = s[1];
    },
    // 封存公积金
    onStopGJYearMonthChange(date, dateString) {
      const s = dateString.split("-");
      this.stopGjyear = s[0];
      this.stopGjmonth = s[1];
    },
    onTypejianChange1(e) {
      this.jianShebao = e.target.checked;
    },
    onTypejianChange2(e) {
      this.jianYibao = e.target.checked;
    },
    onTypejianChange3(e) {
      this.jianGjj = e.target.checked;
    },
    openDetail(detail) {
      this.currentDetail = detail;
      this.xiangqing = true;
    },
    getChannelsList() {
      getChannels({
        pageNo: 1,
        pageSize: 1000
      }).then((res) => {
        this.channelNames = res.data.entities;
      });
    },
    getListByCompanyId() {
      listByCompanyIdGet({ companyId: this.$store.state.hr.companyId })
        .then(({ data }) => {
          this.labelList = data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 生成回款
    addBatchRecordList() {
      this.isChooseStaff = true;
      this.selectState = 1;
    },
    backFeiyong() {
      this.isChooseStaff3 = true;
    },
    BatchFix() {
      this.$router.push({
        path: "/shebao/shebaoManage/BatchFix"
      });
    },
    onChangeZhiNajin(value) {
      console.log(this.zhanajin);
      if (this.bushouTypeValue === 1) {
        // 社保
      } else if (this.bushouTypeValue === 2) {
        // 公积金
      }
    },
    getDefaultCard() {
      var value = 0;
      var same = true;
      for (var i = 0; i < this.formData.length; i++) {
        if (value !== 0) {
          const v = this.onlySocAmount ? this.formData[i].cardinalityDefaultAmount : this.formData[i].cardinalityDefault;
          if (v !== value) {
            same = false;
            break;
          }
        } else {
          value = this.onlySocAmount ? this.formData[i].cardinalityDefaultAmount : this.formData[i].cardinalityDefault;
        }
      }
      if (same) {
        this.defaultCard = value;
      } else {
        this.editBaseInfo();
      }
    },
    shouDongBuChaOkHandel() {
      this.shouDongBuChaVisible = false;
      // 下一步是否是批量
    },
    tranDate(item) {
      return moment(item).format("YYYY-MM");
    },
    onTypeChangeValue(e) {
      this.typeValueTime = e.target.value;
    },
    onTopTabs(index) {
      this.active = index;
      if (this.active !== 0) {
        switch (this.active) {
          case 1:
            this.dparams.topStatus = 1;
            break;
          case 2:
            this.dparams.topStatus = 2;
            break;
          case 3:
            this.dparams.topStatus = 4;
            break;
        }
      } else {
        delete this.dparams.topStatus;
      }
      this.pagination.current = 1;
      this.checkPeopleAmount();
    },
    customExpandIcon(props) {
      if (props.expanded) {
        return (
          <a
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
          >
            收起
          </a>
        );
      } else {
        return (
          <a
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
          >
            展开
          </a>
        );
      }
    },

    ExportHandle() {
      this.beforeUpload();
    },
    closeLookNms() {
      this.looknames = false;
      this.isDaoru = true;
    },
    renliClick(index) {
      switch (index) {
        case 1: // 社保
          this.dataDetail3 = this.shebaoErro;
          break;
        case 2: // 医保
          this.dataDetail3 = this.yibaoErro;
          break;
        case 3: // 公积金
          this.dataDetail3 = this.gongjijinErro;
          break;
      }
      this.looknames = true;
      this.isDaoru = false;
    },
    huamingce() {
      this.$router.push({
        path: "/shebao/employee"
      });
    },
    //
    disabledDateTuifei2(current) {
      const startValue = moment(this.stopTuiFeiyear2 + "-" + this.stopTuiFeimonth2, this.monthFormat);
      if (!current || !startValue) {
        return false;
      }
      return startValue.valueOf() < current.valueOf();
    },
    disabledDateTuiFei3(current) {
      const startValue = moment(this.stopTuiFeiyear + "-" + this.stopTuiFeimonth, this.monthFormat);
      if (!current || !startValue) {
        return false;
      }
      return startValue.valueOf() > current.valueOf();
    },
    // 减员停保日期
    disabledDate2(current) {
      return current && current <= moment().subtract(1, "months");
    },
    disabledDate3(current) {
      return current && (current < moment().startOf("month") || current > moment().endOf("month")); // 月份第一天
    },
    disabledDate(current) {
      return (
        current &&
        current >=
          moment()
            .month(moment().month() - 1)
            .endOf("day")
      );
    },
    gotoEdit() {
      this.bushoubujiao1 = false;
      this.$router.push({
        path: `/shebao/shebaoMethod/editMethod`,
        query: {
          id: this.progId
        }
      });
    },
    bushoujiaoHandle(text) {
      if (this.inApproval) {
        this.$message.success("账单已生成，不允许操作");
        return;
      }
      var data = {
        companyId: this.$store.state.hr.companyId,
        empId: this.staffList[0].id
      };
      this.databushou = [];
      getbushoudate(data).then((res) => {
        if (res.code === 200) {
          res.data.map((item) => {
            this.databushou.push(Number(item));
          });
        }
      });
      this.evprogId = text.progId;
      this.tempId = text.id;
      this.defaultCard = 0; // 社保设置全部的基数
      this.defaultGongjiJin = 0; // 公积金基数
      this.bushoubujiao1 = true;
      this.shebaostartyear = "";
      this.shebaostartmonth = "";
      this.shebaoendyear = "";
      this.shebaoendmonth = "";
      this.shebaoEndDate = 0;
      this.shebaoStartDate = 0;
      this.currentItem = text;
      if (this.currentItem) {
        this.formData = this.deepCopy(this.currentItem.progItemListVo);
      }
      this.zhanajin = 0;
      this.clumnDetailGuding = text.onlySocAmount;
      this.hasGongjijin = !text.payProvidentFund;
    },
    // 完成对话框社保编辑
    bushoubujiaof() {
      this.bushouTable = false;
      var data = {
        companyId: this.$store.state.hr.companyId,
        serviceCost: this.serviceCost,
        month: this.month,
        monthId: this.monthCurrent,
        payAttribution: this.defaultFeiyong
      };
      var empIds = [];
      for (var i = 0; i < this.staffList.length; i++) {
        empIds.push(this.staffList[i].id);
      }
      data.empIdList = empIds;
      if (this.bushouTypeValue === 1) {
        data.fillGatherStartDate = this.shebaoStartDate;
        data.fillGatherEndDate = this.shebaoEndDate;
        data.fine = this.zhanajin;
        data.socProgId = this.progId;
        data.empSocItemDOList = this.formData;
        bushou(data).then((res) => {
          if (res.code === 200) {
            this.bushoubujiaook = true;
            this.checkPeopleAmount();
            this.searchShebaoInfo();
            this.checkShebaoMethod();
          }
        });
      } else if (this.bushouTypeValue === 2) {
        // 公积金补缴
        data.fillPaymentEndDate = this.shebaoEndDate;
        data.fillPaymentStartDate = this.shebaoStartDate;
        data.fine = this.zhanajin;
        data.socProgId = this.progId;
        data.empSocItemDOList = this.formData;
        bujiao(data).then((res) => {
          if (res.code === 200) {
            this.bushoubujiaook = true;
            this.checkPeopleAmount();
            this.searchShebaoInfo();
            this.checkShebaoMethod();
          }
        });
      }
    },
    // 创建参保选择方案
    chooseType(value) {
      this.defaultFeiyong = value;
    },
    chooseTypetest(value) {
      this.defaultFeiyongtest = value;
    },
    // 停供社保
    onShebaoStartChange(date, dateString) {
      const s = dateString.split("-");
      this.shebaostartyear = s[0];
      this.shebaostartmonth = s[1];
      this.shebaoStartDate = Number(date);
      if (this.shebaoStartDate !== 0 && this.shebaoEndDate !== 0) {
        if (this.shebaoStartDate > this.shebaoEndDate) {
          this.$message.success("起止年月必须晚与终止年月");
        }
      }
    },
    onShebaoEndChange(date, dateString) {
      const s = dateString.split("-");
      this.shebaoendyear = s[0];
      this.shebaoendmonth = s[1];
      this.shebaoEndDate = Number(date);
      if (this.shebaoStartDate !== 0 && this.shebaoEndDate !== 0) {
        if (this.shebaoStartDate > this.shebaoEndDate) {
          this.$message.success("起止年月必须晚与终止年月");
        }
      }
    },
    // 业务类型选择
    onSheBaoTypeChange(e) {
      this.shebaostartyear = "";
      this.shebaostartmonth = "";
      this.shebaoendyear = "";
      this.shebaoendmonth = "";
      this.bushouTypeValue = e.target.value;
    },
    bushoubujiao1next() {
      if (this.shebaoStartDate === 0 || this.shebaoEndDate === 0) {
        this.$message.success("请选择起始和终止日期");
        return;
      }

      if (this.shebaoStartDate >= this.shebaoEndDate) {
        this.$message.success("起止年月必须晚与终止年月");
        return;
      }
      this.bushoubujiao1 = false;
      this.bushouTable = true;
      this.bushoubujiaof();
    },
    prviewBushou() {
      this.bushoubujiao1 = true;
      this.bushouTable = false;
    },
    BushouBuJiaoOkHandle() {
      this.bushoubujiaook = false;
    },
    canbaoguanli() {
      this.bushoubujiaook = false;
      this.goback();
    },
    // 业务类型选择
    onTypeChange(e) {
      this.typeValue = e.target.value;
    },
    DhandleOk() {
      this.Dvisible = false;
      this.finishEdit2();
    },
    finishEdit2() {
      // 减员

      var param2 = {
        companyId: this.$store.state.hr.companyId,
        empIdList: [this.jianyuanItem.empId],
        serviceCost: this.JYserviceCost
      };
      if (this.jianShebao) {
        param2.stopSoc = true;
        param2.planStopSocMonth = this.stopmonth;
        param2.planStopSocYear = this.stopyear;
      } else {
        param2.stopSoc = false;
      }
      if (this.jianYibao) {
        param2.stopMe = true;
        param2.planStopMeMonth = this.stopYBmonth;
        param2.planStopMeYear = this.stopYByear;
      } else {
        param2.stopMe = false;
      }
      if (this.jianGjj) {
        param2.stopPf = true;
        param2.sealedDateMonth = this.stopGjmonth;
        param2.sealedDateYear = this.stopGjyear;
      } else {
        param2.stopPf = false;
      }

      decEmpSocInfos(param2).then((res) => {
        this.progId = "";

        if (res.code === 200) {
          this.Dvisible = false;
          this.Lvisible = true;
          this.dataDetail4 = res.data;
          this.checkPeopleAmount();
          this.searchShebaoInfo();
          this.checkShebaoMethod();
        }
      });
    },

    // 取消增员
    remvoeZenyuanOkHandel() {
      this.removeZengVisible = false;
      var that = this;
      var data = {
        empId: this.empId,
        empSocInfoId: this.tempId
      };

      if (this.tempEmpSocStatus === 2 || this.tempEmpSocStatus === 3) {
        // 取消增员
        remvoeZenyuanOk(data).then((res) => {
          that.$message.success("取消增员成功");
          this.checkPeopleAmount();
        });
      } else if (this.tempEmpSocStatus === 4 || this.tempEmpSocStatus === 5) {
        if (this.typeValue === 1 || this.typeValue === "1") {
          data.isUpdate = true;
        } else {
          data.isUpdate = false;
        }

        // 取消减员
        remvoeJianyuanOk(data).then((res) => {
          that.$message.success("取消减员成功");
          this.checkPeopleAmount();
        });
      }
    },
    onUpload() {},
    beforeUpload1({ file }) {
      this.socFile = file;
      console.log(this.socFile);
    },
    beforeUpload2({ file }) {
      this.meFile = file;
    },
    beforeUpload3({ file }) {
      this.pfFile = file;
    },
    // 预导入
    beforeUpload() {
      const url = "/hr/api/v1/empSocTransform/importSoc";
      const tdata = new FormData();
      tdata.append("meFile", this.meFile);
      tdata.append("monthId", this.monthCurrent);
      tdata.append("pfFile", this.pfFile);
      tdata.append("socFile", this.socFile);

      this.$request({ url, method: "post", data: tdata }).then(({ data }) => {
        if (data) {
          if (data.meImportResult != null) {
            if (data.meImportResult.failed === null || data.meImportResult.failed.length === 0) {
              // 成功
              // 医保成功
              this.yibaoStatus = 1;
            } else {
              // 失败
              // 医保失败
              this.yibaoStatus = 2;
              this.yibaoStatusFail = 0;
              this.yibaoErro = data.meImportResult.failed;
            }
          } else {
            // 没导入文件
            this.yibaoStatus = 0;
            this.yibaoStatusFail = 0;
          }
          if (data.pfImportResult != null) {
            if (data.pfImportResult.failed === null || data.pfImportResult.failed.length === 0) {
              // 公积金成功
              this.gongjijinStatus = 1;
            } else {
              // 公积金失败
              this.gongjijinStatus = 2;
              this.gongjijinStatusFail = 0;
              this.gongjijinErro = data.pfImportResult.failed;
            }
          } else {
            this.gongjijinStatus = 0;
            this.gongjijinStatusFail = 0;
          }
          if (data.socImportResult != null) {
            if (data.socImportResult.failed === null || data.socImportResult.failed.lenght === 0) {
              // 社保成功
              this.renliStatus = 1;
            } else {
              // 社保失败
              this.renliStatus = 2;
              this.renliStatusFail = 0;
              this.shebaoErro = data.socImportResult.failed;
            }
          } else {
            this.renliStatus = 0;
            this.renliStatusFail = 0;
          }
          // 刷新数据
          this.pagination.current = 1;
          this.checkPeopleAmount();
          this.searchShebaoInfo();
          this.checkShebaoMethod();
        }
      });
    },
    handleChange(info) {
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    getZhiNaJinCout(record) {
      if (!record.socialSecurityFine) record.socialSecurityFine = 0;
      if (!record.accumulationFundFine) record.accumulationFundFine = 0;
      return record.socialSecurityFine + record.accumulationFundFine;
    },
    getPostTypeNew(val) {
      return this.socTypeSource[val] ? this.socTypeSource[val]["label"] : "";
    },
    getPayCostType(vl) {
      switch (vl) {
        case 1:
          return "正常应缴";
        case 2:
          return "调整计划";
        case 3:
          return "补收/补缴";
        case 4:
          return "个人退收";
        case 7:
          return "退费";
      }
    },
    leftClick() {
      this.selectedRowKeys = [];
      if (this.monthPrevious.length === 0) {
        this.$message.success("暂无社保数据");
        return;
      }
      let month = Number(this.month) - 1;

      if (month === 0) {
        month = 12;
        this.year = Number(this.year) - 1 + "";
      }
      if (month < 10) {
        this.month = "0" + month;
      } else {
        this.month = "" + month;
      }
      this.pagination.current = 1;
      this.dparams.month = this.month;
      this.dparams.year = this.year;
      getMonthId({
        companyId: this.$store.state.hr.companyId,
        month: this.month,
        year: this.year
      }).then((res) => {
        this.monthNext = res.data.monthIdNext;
        this.monthPrevious = res.data.monthIdPrevious;
        this.monthCurrent = res.data.monthCurrent;
        this.dparams.monthId = res.data.monthCurrent;
        this.inApproval = res.data.monthCurrentCanNotEdited;
        this.monthWhetherCurrent = res.data.monthWhetherCurrent;
        this.$nextTick(() => {
          this.$refs.tbody.init();
          this.searchShebaoInfo();
          this.checkPeopleAmount();
        });
      });
    },
    rightClick() {
      this.selectedRowKeys = [];
      if (this.monthNext.length === 0) {
        this.$message.success("暂无社保数据");
        return;
      }
      let month = Number(this.month) + 1;

      if (month > 12) {
        month = 1;
        this.year = Number(this.year) + 1 + "";
      }
      if (month < 10) {
        this.month = "0" + month;
      } else {
        this.month = "" + month;
      }
      this.pagination.current = 1;
      this.dparams.month = this.month;
      this.dparams.year = this.year;
      getMonthId({
        companyId: this.$store.state.hr.companyId,
        month: this.month,
        year: this.year
      }).then((res) => {
        this.monthNext = res.data.monthIdNext;
        this.monthPrevious = res.data.monthIdPrevious;
        this.monthCurrent = res.data.monthCurrent;
        this.dparams.monthId = res.data.monthCurrent;
        this.inApproval = res.data.monthCurrentCanNotEdited;
        this.monthWhetherCurrent = res.data.monthWhetherCurrent;
        this.$nextTick(() => {
          this.$refs.tbody.init();
          this.searchShebaoInfo();
          this.checkPeopleAmount();
        });
      });
    },
    onSelectChange(selectedRowKeys, data) {
      this.recordList = [];
      this.selectedRowKeys = selectedRowKeys;
      data.forEach((item, index) => {
        this.recordList.push({
          companyId: this.$store.state.hr.companyId,
          empId: item.empId,
          empSocInfoId: item.id,
          month: item.month,
          year: item.year,
          serviceCost: item.serviceCost,
          socAmount: item.personalSocAmount + item.companySocAmount + item.personalPfAmount + item.companyPfAmount
        });
      });
    },
    judgeDefault(item) {
      if (item.id === "1") return "--";
      if (item.cardinalityDefaultAmount !== null) {
        return item.cardinalityDefaultAmount;
      } else return item.cardinalityDefault;
    },
    // 树形图
    tree(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];

        if (item.leave !== 3) {
          item["disabled"] = onlyLastChild;
        }

        if (item.children) {
          this.tree1(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    },

    tree1(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];
        if (item.leave !== 3) {
          item["disabled"] = onlyLastChild;
        }

        if (item.children) {
          this.tree(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    },
    // 停止参保
    deleteShebao() {
      var that = this;
      this.$confirm({
        title: "确认删除",
        content: "确认删除该月份账单？",
        onOk() {
          const data = [that.id];
          deleteEmpSocInfos(data).then((res) => {
            that.$router.go(-1);
          });
        }
      });
    },
    // 设置社保基数
    setAllContent(val) {
      this.formData.map((item, index) => {
        if (item.itemType === 1) {
          if (this.onlySocAmount) {
            item.cardinalityDefaultAmount = this.defaultCard;
          } else item.cardinalityDefault = this.defaultCard;
        }
      });
    },
    setGongJiJinContent(val) {
      this.formData.map((item, index) => {
        if (item.itemType === 2) {
          if (this.onlySocAmount) {
            item.cardinalityDefaultAmount = this.defaultGongjiJin;
          } else item.cardinalityDefault = this.defaultGongjiJin;
        }
      });
    },
    // 分页查询
    handlePageChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.checkPeopleAmount();
    },
    // 按员工姓名检索
    handleSearch() {
      this.pagination.current = 1;
      this.checkPeopleAmount();
    },

    // 按城市检索
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1];
        // this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        for (var i = 0; i < label.length; i++) {
          if (i === label.length - 1) {
            this.socCityName += label[i] + "";
          } else {
            this.socCityName += label[i] + "/";
          }
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
      this.dparams.socCity = this.socCityName;
    },
    // 按部门检索
    handleDep(val) {
      this.depId = val;
      this.dparams.depId = this.depId;
      this.pagination.current = 1;
      this.checkPeopleAmount();
    },
    // 根据条件不同查询参保人员信息
    checkPeopleAmount(isemy) {
      this.$setPage("cbgl_condition", this.pagination.current + "");

      this.$setPageSize("cbgl_condition", this.pagination.pageSize + "");

      var data = {
        companyId: this.$store.state.hr.companyId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...this.dparams
      };
      pageEmpSocInfo(data).then((res) => {
        this.pagination.total = res.data.entityCount;
        this.dataDetail = res.data.entities;
        this.dataDetail.forEach((item) => {
          if (item.differenceHead) {
            for (const key in item.differenceHead) {
              item[key] = item.differenceHead[key];
            }
          }
        });
        if (this.active === 0 && this.dataDetail.length === 0 && isemy) {
          this.isEmpy = true;
        }
      });
      this.dparams.companyIdc = this.$store.state.hr.companyId;
      this.$setCondition("cbgl_condition", JSON.stringify(this.dparams));
    },
    getEnum() {
      var data = {
        companyId: this.$store.state.hr.companyId
      };
      getEnum(data).then((res) => {
        this.socPayCostTypeMap = [];
        for (var key in res.data.socPayCostTypeMap) {
          if (key !== "补收" && key !== "补缴") {
            if (key === "社保退费") {
              this.socPayCostTypeMap.push({
                id: res.data.socPayCostTypeMap[key],
                value: "退费"
              });
            } else {
              this.socPayCostTypeMap.push({
                id: res.data.socPayCostTypeMap[key],
                value: key
              });
            }
          }
        }
      });
    },
    // 添加参保选择员工
    onEmployeeSelectChange(ids) {
      this.staffList = ids;
      console.log(this.staffList);
      // this.getDefaultCard();
      this.serviceCost = 0;
      this.isCloseMethod = true;

      this.chooseProgName(this.defaultFangan);
    },
    // 补收补缴选择员工
    onEmployeeSelectChange2(ids) {
      this.staffList = ids;
      console.log(this.staffList);
      this.serviceCost = 0;
      this.bushoujiaoHandle2();
    },
    getShebao(index) {
      switch (index) {
        case 1: // 社保退费
          for (var i = 0; i < this.formData.length; i++) {
            if (this.formData[i].itemType === 1) {
              return false && this.socRefunds;
            }
          }
          return true;
        case 2: // 医保退费
          for (i = 0; i < this.formData.length; i++) {
            if (this.formData[i].itemType === 3) {
              return false && this.meRefunds;
            }
          }
          return true;
        case 3: // 公积金退费
          for (i = 0; i < this.formData.length; i++) {
            if (this.formData[i].itemType === 2) {
              return false && this.pfRefunds;
            }
          }
          return true;
      }
    },
    differenceChange(e) {
      this.empIdListDiff = [];
      this.differenceVisible = true;
      this.nameDifference = undefined;
      this.personalDifference = undefined;
      this.companyDifference = undefined;
      e.forEach((item) => {
        this.empIdListDiff.push(item.id);
      });
    },
    onEmployeeSelectChange3(ids) {
      if (ids.length === 0) {
        this.$message.success("请选择员工");
        return;
      }
      this.isChooseStaff3 = false;
      this.staffList = ids;
      var data = {
        companyId: this.$store.state.hr.companyId,
        empId: ids[0].id
      };
      this.progTuiFeiFilterList = this.progNameList;

      if (this.progNameList.length !== 0) {
        selectSchemeByEmpRelated(data).then((res) => {
          if (res.code === 200) {
            if (res.data !== null) {
              this.socRefunds = res.data.socRefunds;
              this.meRefunds = res.data.meRefunds;
              this.pfRefunds = res.data.meRefunds;

              this.defaultFangan = res.data.id;
            } else {
              this.defaultFangan = this.progNameList[0].id;
            }
            this.progNameList.map((item) => {
              if (item.id === this.defaultFangan) {
                this.progId = this.defaultFangan;

                this.formData = this.deepCopy(item.socProgItemVOList);
                this.payProvidentFund = item.payProvidentFund;
                this.onlySocAmount = item.onlySocAmount;
                this.siteId = item.siteId;
                this.progKeyId = item.id;

                this.tuifeiType = 0;
                for (var i = 0; i < this.formData.length; i++) {
                  if (this.formData[i].itemType === 1) {
                    this.tuifeiType = 1;
                    break;
                  }
                }
                if (this.tuifeiType === 0) {
                  for (i = 0; i < this.formData.length; i++) {
                    if (this.formData[i].itemType === 3) {
                      this.tuifeiType = 2;
                      break;
                    }
                  }
                }
                if (this.tuifeiType === 0) {
                  for (i = 0; i < this.formData.length; i++) {
                    if (this.formData[i].itemType === 2) {
                      this.tuifeiType = 3;
                      break;
                    }
                  }
                }
                this.getFeiYong();
              }
            });
            this.isTuifei = true;
          }
        });
      }
    },
    bushoujiaoHandle2() {
      if (this.inApproval) {
        this.$message.success("账单已生成，不允许操作");
        return;
      }
      var data = {
        companyId: this.$store.state.hr.companyId,
        empId: this.staffList[0].id
      };
      this.databushou = [];
      getbushoudate(data).then((res) => {
        if (res.code === 200) {
          res.data.map((item) => {
            this.databushou.push(Number(item));
          });
        }
      });
      this.serviceCost = 0;
      if (this.progNameList.length !== 0) {
        this.defaultFangan = this.progNameList[0].id;
        // console.log("-------------")
        this.progNameList.map((item) => {
          if (item.id === this.defaultFangan) {
            this.progId = this.defaultFangan;
            this.formData = this.deepCopy(item.socProgItemVOList);
            this.payProvidentFund = item.payProvidentFund;
            this.onlySocAmount = item.onlySocAmount;
            this.siteId = item.siteId;
            this.progKeyId = item.id;
            if (this.currentItem && this.currentItem.socProgName === item.progName && this.currentItem.serviceCost) {
              this.serviceCost = this.currentItem.serviceCost;
            } else {
              this.serviceCost = item.serviceCost ? item.serviceCost : 0;
            }
          }
        });
      }
      this.defaultCard = 0; // 社保设置全部的基数
      this.defaultGongjiJin = 0; // 公积金基数
      this.bushoubujiao1 = true;
      this.shebaostartyear = "";
      this.shebaostartmonth = "";
      this.shebaoendyear = "";
      this.shebaoendmonth = "";
      this.shebaoEndDate = 0;
      this.shebaoStartDate = 0;
      this.progId = "";
      if (this.currentItem) {
        this.formData = this.deepCopy(this.currentItem.progItemListVo);
      }
      this.zhanajin = 0;
    },
    privCancel() {
      this.isCloseMethod = false;
      this.toSetshebao();
    },
    formatDate2(text) {
      const s = formatDate(text).split("-");
      return s[0] + "年" + s[1] + "月";
    },
    // 选择在职员工按钮
    chooseOnWork() {
      this.isChooseStaff = true;
      this.selectState = 0;
      this.currentItem = undefined;
    },
    chooseOnWork2() {
      this.isChooseStaff2 = true;
    },
    // 取消创建参保方案
    handleCancel() {
      this.tuiFeiVisible = false;
      this.isTuifei = false;
      this.isEmpy = false;
      this.isDaoru = false;
      this.bushoubujiao1 = false;
      this.bushoubujiaook = false;
      this.bushouTable = false;
      this.isChooseStaff = false;
      this.isUndoShebao = false;
      this.isUndoShebao2 = false;
      this.shouDongBuChaVisible = false;
      this.isSetting = false;
      this.isCloseMethod = false;
      // this.isAddShebao = false;
      this.isStopShebao = false;
      this.isExistName = false;
      this.removeZengVisible = false;
      this.init(2);
      this.monthYear = "";
      this.Dvisible = false;
    },

    // 减员
    finishjian() {
      if ((this.defaultGongjiJin + "").trim() === "") {
        this.$message.success("公积金基数不能为空");
        return;
      }
      if ((this.defaultCard + "").trim() === "") {
        this.$message.success("个人社保基数不能为空");
        return;
      }

      var that = this;

      if (this.zengyuanOrJianyuan) {
        if (!this.addShebao && !this.addGjj && !this.addYibao) {
          this.$message.success("请选择增员项目");
          return;
        }
      } else {
        if (!this.jianShebao && !this.jianGjj && !this.jianYibao) {
          this.$message.success("请选择减员项目");
          return;
        }
      }

      if (this.defaultFangan === 0) {
        that.$message.success("请先创建参保方案");
        return;
      } else {
        // 弹出添加增减员下一步对话框
        this.Dvisible = true;
        this.isStopShebao = false;
      }
    },
    // 撤销参保
    handleUndo() {
      const data = [];
      data.push(this.keyId);
      var that = this;
      changeEmpBatchRevocation(data).then((res) => {
        that.$message.success("参保撤销成功");
        this.isUndoShebao = false;
        this.isUndoShebao2 = false;
        if (this.pagination.total % this.pagination.pageSize === 1 && this.pagination.current > 1) {
          this.pagination.current -= 1;
        }
        this.checkPeopleAmount();
        this.searchShebaoInfo();
      });
      // this.$router.go(0);
    },
    // 批量撤销
    handleUndo2() {
      var that = this;
      const data = [];
      for (var i = 0; i < this.selectedRowKeys.length; i++) {
        data.push(this.selectedRowKeys[i]);
      }

      changeEmpBatchRevocation(data).then((res) => {
        this.isUndoShebao = false;
        this.isUndoShebao2 = false;
        that.$message.success("参保撤销成功");
        if ((this.pagination.total % this.pagination.pageSize) - this.selectedRowKeys.length === 0 && this.pagination.current > 1) {
          this.pagination.current -= 1;
        }
        this.checkPeopleAmount();
        this.searchShebaoInfo();
        this.selectedRowKeys = [];
      });
      // this.$router.go(0);
    },

    // 减员弹框
    stopShebao(text) {
      if (this.currentDetail ? this.currentDetail.empExist === 1 : true) {
        if (this.inApproval) {
          this.$message.success("账单已生成，不允许操作");
          return;
        }
        this.xiangqing = false;

        this.jianyuanItem = text;
        this.empId = text.empId;
        this.tempId = text.id;

        this.jianShebao = false;
        this.jianYibao = false;
        this.jianGjj = false;
        // this.getJianYuanList(); // 获取列表
        this.getJianYuanJiaoYanList(); // 获取减员校验
      } else {
        this.$message.error("员工已被删除");
      }
    },
    deletShebao(text) {
      deleteById(text.id).then((res) => {
        this.xiangqing = false;
        this.checkPeopleAmount();
        this.searchShebaoInfo();
        this.checkShebaoMethod();
      });
    },
    getJianYuanJiaoYanList() {
      var data = [this.jianyuanItem.empId];
      checkDecrease(data).then((res) => {
        // this.pagination2.total = res.data;
        if (res.data != null) {
          this.stopyear = "";
          this.stopmonth = "";
          this.stopGjyear = "";
          this.stopGjmonth = "";
          this.stopYByear = "";
          this.stopYBmonth = "";
          for (var i = 0; i < res.data.length; i++) {
            this.jianShebao_2 = res.data[i].socNoPayment;
            this.jianYibao_2 = res.data[i].meNoPayment;
            this.jianGjj_2 = res.data[i].pfNoPayment;
          }

          if (!this.jianShebao_2) {
            this.stopyear = "" + this.year;
            this.stopmonth = this.month;
          }
          if (!this.jianGjj_2) {
            this.stopGjyear = "" + this.year;
            this.stopGjmonth = this.month;
          }
          if (!this.jianYibao_2) {
            this.stopYByear = "" + this.year;
            this.stopYBmonth = this.month;
          }
        }
        this.isStopShebao = true;
        this.JYserviceCost = undefined;
      });
    },
    // 完成对话框社保编辑
    finishEdit() {
      if ((this.defaultGongjiJin + "").trim() === "") {
        this.$message.success("公积金基数不能为空");
        return;
      }
      if ((this.defaultCard + "").trim() === "") {
        this.$message.success("个人社保基数不能为空");
        return;
      }
      if (this.progId) {
        const ids = [];
        this.staffList.map((item) => {
          ids.push(item.id);
        });
        this.isCloseMethod = false;
        const data = ids.map((empId) => ({
          onlySocAmount: this.onlySocAmount,
          payProvidentFund: this.payProvidentFund,
          companyId: this.$store.state.hr.companyId,
          monthId: this.monthCurrent,
          empId: empId,
          year: this.year,
          month: this.month,
          empSocItemDTOList: this.formData,
          progId: this.progId,
          serviceCost: this.serviceCost
        }));
        addSoc({ empSocInfoAddDTOList: data }).then((res) => {
          if (res.data !== null && res.data.empInfoDOListRepeat !== null && res.data.empInfoDOListRepeat) {
            res.data.empInfoDOListRepeat.map((item) => {
              this.existName.push(item.name);
              // this.existEmpId.push(item.empId)
            });
            this.isExistName = true;
          }

          if (res.code === 200) {
            this.$notification["success"]({
              message: "添加成功"
            });
            this.checkPeopleAmount();
            this.searchShebaoInfo();
            this.checkShebaoMethod();
          }
        });
      }
      this.init(2);
    },
    // 完成抽屉社保编辑
    submitEdit(bushoubujiao) {
      if ((this.defaultGongjiJin + "").trim() === "") {
        this.$message.success("公积金基数不能为空");
        return;
      }
      if ((this.defaultCard + "").trim() === "") {
        this.$message.success("个人社保基数不能为空");
        return;
      }
      this.formData.map((item) => {
        item.empSocId = this.keyId;
      });
      const data = {
        companyId: this.$store.state.hr.companyId,
        progId: this.progId,
        year: this.currentItem.year,
        month: this.currentItem.month,
        id: this.keyId,
        empSocItemListVOList: this.formData,
        onlySocAmount: this.onlySocAmount,
        payProvidentFund: this.payProvidentFund,
        serviceCost: this.serviceCost
      };
      setCardinality(data).then((res) => {
        this.checkPeopleAmount();
        this.searchShebaoInfo();
      });
      this.isShowShebaoInfo = false;
      this.init(1);
    },
    submitTuiFei() {
      if (this.progTuiFeiFilterList.length === 0) {
        this.$message.success("无参保方案");
        return;
      }
      var data = {
        companyId: this.$store.state.hr.companyId,
        progId: this.defaultFangan,
        empId: this.staffList[0].id,
        monthId: this.monthCurrent,
        year: this.year,
        month: this.month,
        refundsBeginTime: moment(this.stopTuiFeiyear + "-" + this.stopTuiFeimonth, this.monthFormat).format(),
        refundsEndTime: moment(this.stopTuiFeiyear2 + "-" + this.stopTuiFeimonth2, this.monthFormat).format()
      };

      if (this.tuifeiType === 1 || this.tuifeiType === 2) {
        data.companySocAmount = this.companyAmount;
        data.personalSocAmount = this.personAmount;
        data.companyPfAmount = 0;
        data.personalPfAmount = 0;
        if (this.tuifeiType === 1) {
          data.refundsType = 1;
        } else {
          data.refundsType = 3;
        }
      } else {
        data.refundsType = 2;
        data.companySocAmount = 0;
        data.personalSocAmount = 0;
        data.companyPfAmount = this.companyAmount;
        data.personalPfAmount = this.personAmount;
      }
      refunds(data).then((res) => {
        if (res.code === 200) {
          this.isTuifei = false;
          this.tuiFeiVisible = true;
          this.checkPeopleAmount();
          this.searchShebaoInfo();
          this.checkShebaoMethod();
        }
      });
    },
    // 编辑参保各项目基数
    editBaseInfo() {
      this.isShebaoBase = false;
    },
    returnEdit() {
      this.isShebaoBase = true;
    },
    editBaseInfoGJ() {
      this.isGongJJBase = false;
    },
    returnEditGJ() {
      this.isGongJJBase = true;
    },
    piLiangDaoRu() {
      if (this.inApproval) {
        this.$message.success("账单已生成，不允许操作");
        return;
      }
      this.renliStatus = 0; // 0拖拽，1成功，2失败
      this.renliStatusFail = 0; // 0失败，1重复

      this.yibaoStatus = 0; // 0拖拽，1成功，2失败
      this.yibaoStatusFail = 0; // 0失败，1重复

      this.gongjijinStatus = 0; // 0拖拽，1成功，2失败
      this.gongjijinStatusFail = 0; // 0失败，1重复
      this.shebaoErro = [];
      this.gongjijinErro = [];
      this.yibaoErro = [];
      this.meFile = undefined;
      this.pfFile = undefined;
      this.socFile = undefined;
      this.isDaoru = true;
    },
    exportExel() {
      this.checkedKey = {
        checkedKeys: [],
        rightData: []
      };
      selectAllHead(this.$store.state.hr.companyId, this.monthCurrent)
        .then((res) => {
          const checkedKeysTemp = [];
          const rightDataTemp = [];
          res.data.forEach((element, index) => {
            element.enName = index;
            element.name = element.groupName;
            element.groupItem.forEach((esy) => {
              if (esy.defaultFlag || esy.isSelect) {
                checkedKeysTemp.push({ key: esy.enName, sort: esy.sort });
                rightDataTemp.push(esy);
                if (esy.defaultFlag) {
                  esy.disableCheckbox = esy.defaultFlag;
                }
              }
            });
          });
          this.checkedKey = {
            checkedKeys: _.sortBy(checkedKeysTemp, ["sort"], ["asc"]).map((item) => item.key),
            rightData: _.sortBy(rightDataTemp, ["sort"], ["asc"])
          };

          // this.selectAllHeadData = res.data;
          this.selectAllHeadData = [{ groupItem: res.data, name: "全选" }];
          this.ExportVisible = true;
        })
        .catch((err) => {
          this.$message.error("失败!");
          console.log("debug log --> ", err);
        });
    },
    handleOk(e) {
      const data = {
        channelId: this.channelId,
        tag: this.tags.join(",") ? this.tags.join(",") : undefined,
        regType: this.regType,
        companyId: this.$store.state.hr.companyId,
        month: this.month,
        year: this.year,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        name: this.searchName,
        socCity: this.socCityName, // this.socCity,
        depId: this.depId,
        socProgId: this.progIdser,
        monthId: this.monthCurrent,
        headInfo: this.$refs.transfer.rightData
      };
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        data.empSocInfoIdList = this.selectedRowKeys;
      }
      if (this.selectedRowKeys.length > 0) {
        data.empSocInfoIdList = this.selectedRowKeys;
      }
      if (this.socPayCostType !== undefined) {
        data.socPayCostType = this.socPayCostType;
      }
      if (this.rStatus) {
        data.status = this.rStatus;
      }
      if (this.active !== 0) {
        switch (this.active) {
          case 1:
            data.topStatus = 1;
            break;
          case 2:
            data.topStatus = 2;
            break;
          case 3:
            data.topStatus = 4;
            break;
        }
      }
      axios({
        url: "/hr/api/v1/empSocTransform/exportEmpSocInfo",
        data,
        method: "post",
        responseType: "blob",
        headers: {
          token: this.$store.state.auth.token,
          "Content-Type": "application/json"
        }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${this.$store.state.hr.companyName}_` + "参保管理" + ".xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
      this.$refs.transfer.checkedKeys = [];
      this.$refs.transfer.rightData = [];
      this.ExportVisible = false;
    },
    handleExportCancel() {
      this.$refs.transfer.checkedKeys = [];
      this.$refs.transfer.rightData = [];
      this.ExportVisible = false;
    },
    // 点击添加参保按钮
    toSetshebao() {
      if (this.inApproval) {
        this.$message.success("账单已生成，不允许操作");
        return;
      }
      this.checkShebaoMethod();
      if (this.progNameList.length !== 0) {
        this.progNameList.map((item) => {
          if (item.progName && item.progName !== null) {
            this.isSetting = false;
            // this.isAddShebao = true;
            this.chooseOnWork();
          } else {
            this.isSetting = true;
            // this.isAddShebao = false;
            this.isChooseStaff = false;
          }
        });
      } else {
        this.isSetting = true;
        // this.isAddShebao = false;
        this.isChooseStaff = false;
      }
      this.formData = [];
    },
    goback() {
      // this.$router.go(-1);
      this.$router.push({
        path: "/shebao/shebaoManage"
      });
    },
    // 未创建参保方案时去创建参保方案
    toSetMethod() {
      this.$router.push({
        path: "/shebao/shebaoMethod/addMethod"
      });
    },
    editShebaoInfo(value) {
      if (this.inApproval) {
        this.$message.success("账单已生成，不允许操作");
        return;
      }
      this.xiangqing = false;
      this.defaultCard = 0; // 社保设置全部的基数
      this.defaultGongjiJin = 0; // 公积金基数
      this.currentItem = value;
      console.log(this.currentItem);
      this.dataDetail.map((item) => {
        if (item.id === value.id) {
          this.keyId = value.id;
          this.formData = this.deepCopy(item.progItemListVo);
          this.evprogName = item.progName;

          this.chooseEditProgName(item.progId);
          return;
        }
      });
      // this.getDefaultCard();

      this.isShowShebaoInfo = true;

      selectSchemeByEmpSocInfoId({
        companyId: this.$store.state.hr.companyId,
        empSocInfoId: this.currentItem.id
      }).then((res) => {
        this.progFilterList = [];
        // console.log(this.progNameList)
        for (var j = 0; j < res.data.length; j++) {
          for (var i = 0; i < this.progNameList.length; i++) {
            if (this.progNameList[i].id === res.data[j]) {
              this.progFilterList.push(this.progNameList[i]);
              break;
            }
          }
        }
      });
    },
    undoShebao() {
      // 发请求
      this.singleUndoShebao = true; // 单独撤销参保

      this.isUndoShebao = true;
    },
    undoShebao2() {
      if (this.inApproval) {
        this.$message.success("账单已生成，不允许操作");
        return;
      }
      // 发请求
      this.singleUndoShebao = false; // 批量撤销参保

      if (this.selectedRowKeys.length !== 0) {
        this.isUndoShebao2 = true;
      }
    },
    // 查询参保方案
    checkShebaoMethod() {
      getListAllRelation({ companyId: this.$store.state.hr.companyId }).then((res) => {
        this.progNameList = res.data;
        if (this.progNameList.length !== 0) {
          this.defaultFangan = this.progNameList[0].id;

          this.progNameList.map((item) => {
            if (item.id === this.defaultFangan) {
              this.progId = this.defaultFangan;
              if (this.currentItem && this.currentItem.progId === this.progId) {
                this.formData = this.deepCopy(this.currentItem.progItemListVo);
              } else {
                this.formData = this.deepCopy(item.socProgItemVOList);
              }
              // this.formData = this.deepCopy(item.socProgItemVOList);
              this.payProvidentFund = item.payProvidentFund;
              this.onlySocAmount = item.onlySocAmount;
              this.siteId = item.siteId;
              this.progKeyId = item.id;
            }
          });
        }
      });
    },
    // 进入参保记录页面
    enterRecord() {
      this.xiangqing = false;
      this.$router.push({
        path: `/shebao/shebaoMingDan/detailed/${this.currentDetail.empId}`,
        query: {
          id: this.id,
          year: this.year,
          month: this.month,
          prevpage: "/shebao/shebaoManage/shebaoDetail",
          disable: this.currentDetail ? (this.currentDetail.empExist === null ? false : this.currentDetail.empExist === 1) : true
        }
      });
    },
    // 个人档案
    personInfo() {
      if (this.currentDetail ? (this.currentDetail.empExist === null ? false : this.currentDetail.empExist === 1) : true) {
        this.xiangqing = false;
        // console.log(location);
        this.$router.push({
          path: "/staff/detail",
          query: {
            id: this.currentDetail.empId,
            userId: this.currentDetail.userId,
            isDelete: true,
            prevpage: location.hash.slice(1)
          }
        });
      } else {
        this.$message.error("员工已被删除");
      }
    },
    closeDrawer() {
      this.isShowShebaoInfo = false;
      this.init(1);
    },
    closeXiangq() {
      this.xiangqing = false;
    },
    // 深拷贝，解决引用赋值
    deepCopy(arr) {
      const newArr = [];
      arr.forEach((item, index) => {
        const record = {};
        for (const k in item) {
          record[k] = item[k];
        }
        newArr.push(record);
      });
      return newArr;
    },
    // 展开个人信息
    expandedRowsChange(expend, value) {
      this.dataDetail.map((item) => {
        if (item.id === value.id) {
          this.empId = item.empId;
          this.userId = item.userId;
        }
      });
    },
    // 改变社保基数
    changeDefault(val, index) {
      this.personAmount = 0;
      this.companyAmount = 0;
      if (this.onlySocAmount) {
        this.formData[index].cardinalityDefaultAmount = val;
      } else {
        this.formData[index].cardinalityDefault = val;
      }
      this.getFeiYong();
    },
    // 处理减员月份
    handleCutMonth(val) {
      this.monthYear = val;

      this.cutMonth = this.monthYear.substring(5, 7);
      this.cutYear = this.monthYear.substring(0, 4);
    },
    // 创建参保选择方案
    chooseProgName(value) {
      this.defaultFangan = value;

      this.progNameList.map((item) => {
        if (item.id === this.defaultFangan) {
          this.progId = this.defaultFangan;
          if (this.currentItem && this.currentItem.progId === this.progId) {
            this.formData = this.deepCopy(this.currentItem.progItemListVo);
          } else {
            this.formData = this.deepCopy(item.socProgItemVOList);
          }
          console.log(this.formData);
          // this.formData = this.deepCopy(item.socProgItemVOList);
          this.payProvidentFund = item.payProvidentFund;
          this.onlySocAmount = item.onlySocAmount;
          // this.socProgAddDTO = item

          this.siteId = item.siteId;
          this.progKeyId = item.id;
          if (this.currentItem && this.currentItem.progId === this.progId && this.currentItem.serviceCost) {
            this.serviceCost = this.currentItem.serviceCost;
          } else {
            this.serviceCost = item.serviceCost;
          }
        }
      });
      let d = -1;
      let d2 = -1;
      for (var i = 0; i < this.formData.length; i++) {
        const item = this.formData[i];
        if (item.itemType === 1) {
          // 社保
          if (this.onlySocAmount) {
            if (d === -1) {
              d = item.cardinalityDefaultAmount;
            }
            if (d !== item.cardinalityDefaultAmount) {
              // 展开
              this.isShebaoBase = false;
              return;
            }
          } else {
            if (d === -1) {
              d = item.cardinalityDefault;
            }
            if (d !== item.cardinalityDefault) {
              // 展开
              this.isShebaoBase = false;
              return;
            }
          }
        } else if (item.itemType === 2) {
          // 公积金
          if (this.onlySocAmount) {
            if (d2 === -1) {
              d2 = item.cardinalityDefaultAmount;
            }
            if (d2 !== item.cardinalityDefaultAmount) {
              // 展开
              this.isGongJJBase = false;
              return;
            }
          } else {
            if (d2 === -1) {
              d2 = item.cardinalityDefault;
            }
            if (d2 !== item.cardinalityDefault) {
              // 展开
              this.isGongJJBase = false;
              return;
            }
          }
        }
      }
    },
    getprogName() {
      this.progTuiFeiFilterList.map((item) => {
        console.log(this.defaultFangan + "/" + item.id);
        if (item.id === this.defaultFangan) {
          console.log("iiiiii=" + item.progName);
          return item.progName;
        }
      });
    },
    chooseEditTuiFeiProgName(value) {
      this.defaultFangan = value;
      this.progTuiFeiFilterList.map((item) => {
        if (item.id === this.defaultFangan) {
          this.progId = this.defaultFangan;

          this.formData = this.deepCopy(item.socProgItemVOList);

          // this.formData = this.deepCopy(item.socProgItemVOList);
          this.payProvidentFund = item.payProvidentFund;
          this.onlySocAmount = item.onlySocAmount;
          this.siteId = item.siteId;
          this.progKeyId = item.id;

          this.tuifeiType = 0;
          for (var i = 0; i < this.formData.length; i++) {
            if (this.formData[i].itemType === 1) {
              this.tuifeiType = 1;
              break;
            }
          }
          if (this.tuifeiType === 0) {
            for (i = 0; i < this.formData.length; i++) {
              if (this.formData[i].itemType === 3) {
                this.tuifeiType = 2;
                break;
              }
            }
          }
          if (this.tuifeiType === 0) {
            for (i = 0; i < this.formData.length; i++) {
              if (this.formData[i].itemType === 2) {
                this.tuifeiType = 3;
                break;
              }
            }
          }
          this.getFeiYong();
        }
      });
      // progTuiFeiFilterList
    },

    // 编辑员工参保信息选择方案
    chooseEditProgName(value) {
      this.progNameList.map((item) => {
        if (item.id === value) {
          this.progId = item.socProgItemVOList[0].progId;
          if (this.currentItem && this.currentItem.progId === this.progId) {
            this.formData = this.deepCopy(this.currentItem.progItemListVo);
          } else {
            this.formData = this.deepCopy(item.socProgItemVOList);
          }

          // 过滤没有的
          if (this.currentItem) {
            var has = [];
            for (var i = 0; i < this.currentItem.progItemListVo.length; i++) {
              if (this.currentItem.progItemListVo[i].itemType && !has.includes(this.currentItem.progItemListVo[i].itemType)) {
                has.push(this.currentItem.progItemListVo[i].itemType);
              }
            }
            var newFormD = [];
            for (var j = 0; j < this.formData.length; j++) {
              for (var k = 0; k < has.length; k++) {
                if (!this.formData[j].itemType || this.formData[j].itemType === has[k]) {
                  newFormD.push(this.formData[j]);
                }
              }
            }
            this.formData = [];
            this.formData = newFormD;
          }

          this.onlySocAmount = item.onlySocAmount;
          this.payProvidentFund = item.payProvidentFund;
          if (this.currentItem && this.currentItem.progId === this.progId && this.currentItem.serviceCost) {
            this.serviceCost = this.currentItem.serviceCost;
          } else {
            this.serviceCost = item.serviceCost;
          }
        }
      });
      let d = -1;
      let d2 = -1;
      for (var i = 0; i < this.formData.length; i++) {
        const item = this.formData[i];
        if (item.itemType === 1) {
          // 社保
          if (this.onlySocAmount) {
            if (d === -1) {
              d = item.cardinalityDefaultAmount;
            }
            if (d !== item.cardinalityDefaultAmount) {
              // 展开
              this.isShebaoBase = false;
              return;
            }
          } else {
            if (d === -1) {
              d = item.cardinalityDefault;
            }
            if (d !== item.cardinalityDefault) {
              // 展开
              this.isShebaoBase = false;
              return;
            }
          }
        } else if (item.itemType === 2) {
          // 公积金
          if (this.onlySocAmount) {
            if (d2 === -1) {
              d2 = item.cardinalityDefaultAmount;
            }
            if (d2 !== item.cardinalityDefaultAmount) {
              // 展开
              this.isGongJJBase = false;
              return;
            }
          } else {
            if (d2 === -1) {
              d2 = item.cardinalityDefault;
            }
            if (d2 !== item.cardinalityDefault) {
              // 展开
              this.isGongJJBase = false;
              return;
            }
          }
        }
      }
    },
    chooseEditProgId(value) {
      this.progId = value;
      this.progNameList.map((item) => {
        if (item.id === value) {
          this.progId = item.socProgItemVOList[0].progId;
          if (this.currentItem && this.currentItem.progId === this.progId) {
            this.formData = this.deepCopy(this.currentItem.progItemListVo);
          } else {
            this.formData = this.deepCopy(item.socProgItemVOList);
          }

          this.onlySocAmount = item.onlySocAmount;
          this.payProvidentFund = item.payProvidentFund;
          if (this.currentItem && this.currentItem.progId === this.progId && this.currentItem.serviceCost) {
            this.serviceCost = this.currentItem.serviceCost;
          } else {
            this.serviceCost = item.serviceCost;
          }
        }
      });
      let d = -1;
      let d2 = -1;
      for (var i = 0; i < this.formData.length; i++) {
        const item = this.formData[i];
        if (item.itemType === 1) {
          // 社保
          if (this.onlySocAmount) {
            if (d === -1) {
              d = item.cardinalityDefaultAmount;
            }
            if (d !== item.cardinalityDefaultAmount) {
              // 展开
              this.isShebaoBase = false;
              return;
            }
          } else {
            if (d === -1) {
              d = item.cardinalityDefault;
            }
            if (d !== item.cardinalityDefault) {
              // 展开
              this.isShebaoBase = false;
              return;
            }
          }
        } else if (item.itemType === 2) {
          // 公积金
          if (this.onlySocAmount) {
            if (d2 === -1) {
              d2 = item.cardinalityDefaultAmount;
            }
            if (d2 !== item.cardinalityDefaultAmount) {
              // 展开
              this.isGongJJBase = false;
              return;
            }
          } else {
            if (d2 === -1) {
              d2 = item.cardinalityDefault;
            }
            if (d2 !== item.cardinalityDefault) {
              // 展开
              this.isGongJJBase = false;
              return;
            }
          }
        }
      }
    },
    handleExistName() {
      this.isExistName = false;
    },
    // 查询总体员工社保信息
    searchShebaoInfo() {
      const data2 = {
        companyId: this.$store.state.hr.companyId,
        year: this.year,
        month: this.month,
        progId: this.progIdser
      };
      getEmpSocCount(data2).then((res) => {
        this.topData[0].num = res.data.allCount || 0;
        this.topData[1].num = res.data.normalSocCount || 0;
        this.topData[2].num = res.data.increaseCount || 0;
        this.topData[3].num = res.data.decreaseCount || 0;

        this.personalSocAmount = res.data.personalSocAmount; // 个人社保
        this.companySocAmount = res.data.companySocAmount; // 公司社保
        this.personalPfAmount = res.data.personalPfAmount; // 个人公积金
        this.companyPfAmount = res.data.companyPfAmount; // 公司公积金
        this.totalAmount = res.data.allAmount; // 合计

        this.personalDifferenceAmount = res.data.personalDifferenceAmount;
        this.companyDifferenceAmount = res.data.companyDifferenceAmount;
        this.accumulationFundFine = res.data.accumulationFundFine; // 公积金代缴
        this.socialSecurityFine = res.data.socialSecurityFine; // 社保补收
        this.serviceCostAmount = res.data.serviceCost; // 服务费
      });
    },
    // 初始化编辑基数的表单
    init(type) {
      this.formData = [];
      this.isShebaoBase = true;
      this.isGongJJBase = true;
      if (type === 1) {
        this.dataDetail.map((item) => {
          if (item.id === this.keyId) {
            this.evprogName = item.progName;
            this.serviceCost = item.serviceCost;
          }
        });
      }
      if (type === 2) {
        this.evprogName = "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.soc-tb {
  ::v-deep .table-body-top-search {
    margin-top: -48px;
  }
}
.overview-no-select-tag {
  background-color: #fff;
  cursor: pointer;
  margin: 5px;
}
.overview-select-tag-name {
  cursor: pointer;
  margin: 5px;
  color: #666666;
}
.overview-select-tag {
  background-color: #fff !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary);
  cursor: pointer;
  margin: 5px;
}
.overview-tag-wrapper {
  ::v-deep .ant-tag {
    .anticon-close {
      color: var(--primary);
    }
  }
}
.revset {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #fff;
}
.edit {
  color: var(--primary);
}
.top_warp {
  display: flex;
  align-items: center;
  img {
    margin-right: 8px;
  }
  .top_number {
    font-size: 24px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #55565d;
  }
  .top_title {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #767885;
  }
}
.headerTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  .block {
    width: 3px;
    height: 20px;
    background-color: var(--primary);
    margin-right: 12px;
  }
}

.baseInfo-item {
  display: flex;
  flex-flow: row;
  // align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.rowdialog {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.rowdalog2 {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.ant-modal-body {
  line-height: 24px;

  em {
    color: var(--primary);
    font-style: normal;
  }
}
.ant-upload-select-text-box {
  border: 1px dashed #b8b8b8;
  background: #fff;
  margin: 24px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 12px;
}
.ant-upload-select-text-box ::v-deep .ant-upload-list {
  display: none;
}
.brow {
  display: flex;
  flex-direction: row;
  width: 200px;
}
.renyuanxinxi {
  border: 1px solid var(--primary);
  color: var(--primary);
  padding-left: 10px;
  width: 80px;
  height: 33px;
  vertical-align: middle;
  text-align: center;
}
.liangge {
  width: 80px;
  height: 33px;
  vertical-align: middle;
  text-align: center;
  padding-left: 12px;
}

.divshu {
  display: flex;
  align-items: center;
  background: #ffffff;
}
.divshu2 {
  width: 1px;
  height: 57px;
  line-height: 50px;
  text-align: center;
  background: #ccc;
  position: relative;
}
.number2 {
  color: #55565d;
  font-size: 24px;
  font-weight: bold;
}
.titlen {
  color: #9c9c9c;
  font-size: 10px;
}
.mothleft {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 20%;
  padding-right: 20px;
}
.staff-top-item {
  width: 24%;
  border-radius: 8px;
  display: flex;
  height: 86px;
  position: relative;
  cursor: pointer;
  background-color: var(--primary);
}
.staff-top-item2 {
  width: 24%;
  border-radius: 8px;
  display: flex;
  height: 86px;
  position: relative;
  cursor: pointer;
  background-color: #fafafa;
}
.staff-top2-right {
  width: 80%;
  display: flex;
  height: 100%;
}
.staff-top2 {
  width: 20%;
  display: flex;
  height: 100%;
  position: relative;
  padding-left: 36px;
}
.staff-top-item-name {
  color: #767885;
  font-size: 14px;
}
.staff-moth {
  color: #3c3d43;
  font-size: 24px;
  font-weight: bold;
}
.staff-top-item-num {
  color: #55565d;
  font-size: 24px;
  // font-weight: bold;
}
.staff-top-h {
  padding-left: 5px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.staff-top-item-left {
  width: 100%;
  height: 95%;
  display: flex;
  // justify-content: center;
  flex-direction: row;
  align-items: center;
  border-radius: 8px 8px 8px 8px;
  background-color: #fafafa;
}
.card-wrapper {
  margin-top: 15px;
  width: 100%;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left2 {
  display: flex;
  flex-direction: row;
}
.headback {
  display: flex;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.headbttw {
  display: flex;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}
.headbttw2 {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.head {
  margin-bottom: 20px;
}
.pageName {
  span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(232, 232, 232, 1);
    border-radius: 50%;
    margin-right: 10px;
  }
}
.typeList {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 22px;
  margin-top: 20px;
}
.modal-box {
  padding: 20px 30px 30px;
  text-align: center;
  .set-btn {
    margin-top: 40px;
  }
}
.modal-box2 {
  // padding: 20px 30px 30px;
  margin-bottom: 20px;
  text-align: center;
  .set-btn {
    margin-top: 40px;
  }
}
.content-box {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icon-box {
    text-align: center;
    .img-box {
      margin-bottom: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.expend-box {
  display: flex;
  justify-content: flex-start;
  position: relative;
  left: -30px;
}
.userInfo-box {
  width: 100%;

  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-flow: row;
  align-items: center;
}

.userInfo-shebaoInfo {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.shebaoInfo {
  justify-content: space-between;
  display: flex;
  width: 100%;
  .idCardInfo,
  .personshebaoInfo,
  .sfInfo,
  .cityInfo,
  .methodInfo {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
    span {
      overflow: hidden;
    }
    .text {
      font-size: 12px;
      text-align: left;
      color: #a6a8b4;
      width: 80px;
    }
    .number {
      font-size: 12px;
      text-align: right;
    }
  }
}
.editInfo-box {
  display: flex;

  flex-wrap: wrap;
  // padding: 20px;
  padding-top: 20px;
  button {
    margin-right: 6px;
    margin-bottom: 14px;
  }
}
.total-pay-box {
  width: 80%;
}
.payInfo-box {
  width: 100%;
}
.total-pay-box {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  .totalPay {
    color: #252525;
    font-size: 14px;
    font-weight: 600;
  }
  .pay-box {
    display: flex;
    justify-content: space-between;
    .person-pay {
      margin-left: 32px;
    }
    .com-pay {
      margin-left: 80px;
    }
    .total-pay {
      margin-left: 80px;
      margin-right: 32px;
    }
  }
}
.drawer-box {
  .baseInfo-title {
    padding: 14px 24px;
    background: rgba(250, 250, 250, 1);
    border-radius: 4px;
    height: 48px;
    margin-bottom: 24px;
  }
  input {
    margin-left: 20px;
  }
}
.undoShebao {
  padding: 48px 130px;
}
.shebao-base-box {
  width: 100%;

  margin: 24px 0;
  .base-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;

    span {
      margin-left: 5px;
    }
  }
  .baseInfo {
    padding: 24px 0 24px 56px;

    input,
    span {
      margin-left: 40px;
    }
  }
  .baseInfo-box {
    padding: 24px 0 12px 24px;
    input,
    span {
      margin-left: 10px;
    }
  }
}
.baseInfo-item {
  display: flex;
  flex-flow: row;
  // align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.onwork {
  background-color: #faf9f9;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  padding: 30px 18px;
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 33%;
  &:hover {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 33%;
    padding: 30px 18px;
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 10px;
    background: rgba(240, 240, 240, 1);
  }
}
.toChoose {
  width: 50%;
}
.alreadyChoose {
  width: 50%;
}
.choose-type-box {
  display: flex;
  flex-flow: column;
  align-items: center;
  &:hover {
    cursor: pointer;
    color: var(--primary);
  }
  .chooseType {
    margin-bottom: 3px;
  }
}
.exiset-box {
  .title {
    span {
      color: rgba(250, 80, 81, 1);
      margin-right: 5px;
    }
    font-size: 18px;
  }
  .member {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
  }
  .name {
    margin-top: 20px;
    color: var(--primary);
    font-weight: 600;
    font-size: 18px;
    span {
      color: #000;
    }
  }
}
.seleted {
  color: var(--primary);
  display: flex;
  flex-flow: column;
  align-items: center;
}
.detail_item {
  color: var(--primary);
  cursor: pointer;
}
.themColor {
  color: var(--primary);
}
.action-btn {
  color: #767885;
  padding: 0;
  font-size: 12px;
  &:hover {
    color: var(--primary);
  }
}

.table-body-footer {
  transition: all 0.4s linear;
  z-index: 999;
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  background: #ffffff;
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
  text-align: center;
  position: fixed;
  bottom: -56px;
  div {
    position: absolute;
    left: 24px;
  }
}
.table-body-footer-enter {
  bottom: 0;
}
.table-body-footer-leave {
  bottom: -56px;
}
</style>
